Minha opinião é assim:

<div class="panel panel-default panel-store-info">
    ...
    <div id="app">
        <AddFavoriteProduct></AddFavoriteProduct>
    </div>
    ....
</div>

Meu componente é assim:

<template>
    <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteProduct({{ $product->id }})">
        <span class="fa fa-heart"></span>&nbsp;Favorite
    </a>
</template>

<script>
    export default{
        name: 'AddFavoriteProduct',
        props:['idProduct'],
        methods:{
            addFavoriteProduct(event){
                event.target.disabled = true
                const payload= {id_product: this.idProduct}
                this.$store.dispatch('addFavoriteProduct', payload)
                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            }
        }
    }
</script>

Quando clicar no botão favorito, ele chamará o controlador no laravel

Eu tinha registro no app.js assim:

...
import AddFavoriteProduct from './components/AddFavoriteProduct.vue';
...
components: {
                ...
                AddFavoriteProduct
            },
...

Quando executado, o botão favorito não aparece.

Por favor ajude.

ATUALIZAR

Existe um erro como este:

[Vue warn]: Elemento personalizado desconhecido: - você registrou o componente corretamente? Para componentes recursivos, certifique-se de fornecer a opção "nome". (encontrado na instância raiz)

Considerando que eu tinha registrado