laravel-vuejs: My vuejs component is not displaying

This question seem to have been asked a million times but none seem to solve my issue. I am new to vuejs, i have my laravel eCommerce website working appropriately, but i want to use a vue component as the "add to cart" button,

I renamed the exampleComponet.vue to addCart.vue, and i registered my component appropriately, yet, the button is not showing and am getting an error.

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

i have tried several answers here which include clearing browser cache, registering component as Vue.component(name: 'add-cart', require('./components/addCart.vue').default); all didn't work

My addCart.vue:

     <div>
        <button class="btn btn-primary ml-4" v-text="buttonText"></button>
    </div>
</template>

<script>
    export default {
        name: "btn",
        components: {

                    },
        mounted() {
            console.log('Component mounted.')
        },
        props: ['tag'],

    }
</script>

app.js file:

Vue.component('add-cart', require('./components/addCart.vue').default);

My product.blade:

                                           
                                           <input type="hidden" name="id" value="">
                                           <input type="hidden" name="name" value="">
                                           <input type="hidden" name="NewPrice" value="">
                                           <add-cart></add-cart>
                                       </form>```


I want to use the vuejs component with gloudemans/shoppingCArt to add and remove item from cart

via Chebli Mohamed