[Vuejs]-Vuejs reactive v-if template component

Vue expects HTML template markups to be perfect. Otherwise you will run into multiple issues.

I just inspected your template and found an issue – the first <button> element does not close.

Here is the updated version of your code:

Vue.component('favourite-button', {
    props: ['id', 'favourites'],
    template: `
        <input class="hidden" type="input" name="_method" value="{{ id }}" v-model="form.listings_id"></input>
        <button v-if="isFavourite == true" class="favourited" @click="delete(favourite)" :disabled="form.busy">
            <i class="fa fa-heart" aria-hidden="true"></i>

        </button> <!-- This is missing in your version -->

        <button class="not-favourited" v-else @click="create(favourite)" :disabled="form.busy">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <pre>{{ isFavourite == true }}</pre>
    `,
    ...

Note the comment on 7th line above, the closing </button> tag is not present in your template.

As a side note, if you do not want to type back-slash at the end of every line to make multi-line template strings, you can use back-ticks as shown in my code example above. This will help you avoid markup errors leading to Vue component issues and many hours of debugging.

Another reference: Check out “Multi-line Strings” in this page: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

Relevant lines (copied from above page):

Any whitespace inside of the backtick syntax will also be considered part of the string.

console.log(`string text line 1
string text line 2`);

EDIT: Found a possible bug in code

Here is another issue in your create method of favourite-button component:

methods: {
    // ...
    create() {
        Spark.post('/api/favourite', this.form)
            .then(favourite => {
                this.favourite.push(favourite);  // Note: This is the problem area
                this.form.id = '';
            });
    },
    //...
}

Your success handler refers to this.favourite.push(...). You do not have this.favourite in data or props of your component. Shouldn’t it be this.favourites?