AlpineJS passing number coming up as NaN

Question

I have a link in alpineJS

<?php
    $count_posts = get_posts( $args );
    $total_posts_child = count($count_posts);
?>

<li :class="category == <?php echo $category->term_id; ?> ? 'child' : ''" ;>
    <a class="child post_no" data-value="<?php echo $total_posts_child ?>"  @click="total += parseInt($el.dataset.value);  filterPosts(<?= $category->term_id; ?>)"><?= esc_html( $category->name ); echo " ". "(" .$total_posts_child . ")"; ?></a>
</li>
<?php

I am trying to populate my JS function total with the post count.

Alpine.data("filterPosts", (adminURL) => ({
    posts: "",
    limit: 6,
    category: 0,
    post_type_js: post_id,
    showDefault: true,
    showFiltered: false,
    offset: 0,
    total: 0, // want to get the value from the varible he
    
    
    filterPosts(id) {
        this.showDefault = false;
        this.showFiltered = true;
        this.category = id;
        this.offset = 0; // <-- reset offset to zero
        this.fetchPosts();
        this.total = 0;
    },

When i check the output i get NaN, Anyone know how to fix this ?