[Vuejs]-How to display button link with vue.js?

Are you getting any error?

One mistake I see in your code is, you are taking one parameter: event, while you are trying to pass {{ $product->id }} to it, which seems a laravel variable. (Sorry, I don’t know laravel)

If you want both event and product->id in method, you have to pass both parameters from HTML, like it is in docs with help of $event

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

<script>
    export default{
        name: 'AddFavoriteProduct',  // I am not sure if name is needed, don't remember seeing it in docs
        props:['idProduct'],
        methods:{
            addFavoriteProduct(productId, event){
                event.target.disabled = true
                const payload= {id_product: this.idProduct}
                this.$store.dispatch('addFavoriteProduct', payload)
                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            }
        }
    }
</script>

Another problem is you are expecting a prop idProduct, which is not being passed to component, You have to pass it like this in kebab-case:

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

HTML is case-insensitive, so your custom button element <AddFavoriteProduct></AddFavoriteProduct> is being interpreted as your Vue warning reports: <addfavoriteproduct>

When you name your component with camelCase or PascalCase, the corresponding tag name you should be using in your markup should be kebab-cased like so:
<add-favorite-product></add-favorite-product>

Vue knows to do the conversion from “dash-letter” to “uppercase-letter”.

I am not used to vuex, as I generally implement my own store as a POJO object – not graduated with the learning curve of vuex. So can’t provide a working solution with vuex, however to my knowledge, you need to kind of import the action(s) in your component – you can try the below

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

<script>
    export default{
        props:['idProduct'],
        vuex: {
            actions: {
                setFavoriteProduct: setFavoriteProduct
                // assuming you named the action as setFavoriteProduct in vuex
                // avoid duplicate naming for easy debugging
            }
        }
        methods:{
            addFavoriteProduct(productId, event){
                event.target.disabled = true
                const payload= {id_product: this.idProduct}
                // this.$store.dispatch('addFavoriteProduct', payload)
                this.setFavoriteProduct(payload);
                setTimeout(function () {
                    location.reload(true)
                }, 1500);
            }
        },
    }

Note: From Vuex2 the store.dispatch() accepts only one argument (not a problem with your current use case), however if you need to pass multiple arguments to your action you can work around like

store.dispatch('setSplitData',[data[0], data [1]])

// in the action:
setSplitData (context, [data1, data2]) { // uses ES6 argument destructuring

    OR

//... with an object:
store.dispatch('setSplitData',{ 
  data1: data[0], 
  data2: data [1],
})

// in the action:
setSplitData (context, { data1, data2 }) { // uses ES6 argument destructuring
//source: LinusBorg's comment at https://github.com/vuejs/vuex/issues/366