Laravel Vue.js fragment component

Question

I have watched Jeffory's series on Vue.js and I'm practicing writing my own components using the vueify and browserify with gulp. Even after following along with the video I can't manage to get it to render properly. I keep getting this error.

TRY NUMBER ONE

Error:

Attribute "list" is ignored on component <alert> because the component is a fragment instance: 

The view:

<div id = "app" class = "container">

  <alert :list = "tasks"></alert>

</div>

The Componet:

<template>

<div>

    <h1>My tasks

        <span v-show = "remaining"> ( @{{ remaining }} )</span>

    </h1>

    <ul>

        <li :class = "{ 'completed': task.completed }"

            v-for = "task in list"

        @click="task.completed = ! task.completed"

        >

        @{{ task.body }}

        </li>

    </ul>

</div>

</template>



<script>

    export default  {
    props: ['list'],

    computed: {

        remaining: function() {


            return this.list.filter(this.inProgress).length;

            }

        },

        methods: {

            isCompleted: function(task) {

                return task.completed;

            },

            inProgress: function(task) {

                return ! this.isCompleted(task);

            }

        }

    }



new Vue({

    el: '#demo',

    data: {

        tasks: [

            { body: 'go to the store', completed: false },

            { body: 'go to the bank', completed: false },

            { body: 'go to the doctor', completed: true }
        ]
    },


    methods: {

        toggleCompletedFor: function(task) {

            task.completed = ! task.completed;

        }
    }



});

</script>

It gives me a link to read the Fragement Instance section in the documentation. What I understood was that if the template is composed of more than one top level element the component will be fragmented. So I took everything out of the template execpt the actual li tags. With this I still get the same error. What am missing?

Edited Template:

    <li :class = "{ 'completed': task.completed }"

        v-for = "task in list"

    @click="task.completed = ! task.completed"

    >

    @{{ task.body }}

    </li>

TRY NUMBER TWO

Same error

View

    <div id ="app">

    <alert>
        <strong>Success!</strong> Your shit has been uploaded!
    </alert>

    <alert type = "success">
        <strong>Success!</strong> Your shit has been uploaded!
    </alert>

    <alert type = "error">
        <strong>Success!</strong> Your shit has been uploaded!
    </alert>

</div>

Main.js

var Vue = require('vue');


import Alert from './componets/Alert.vue';


new Vue({
    el: '#app',

    components: { Alert },

    ready: function() {

        alert('Ready to go!');
    }
});

Alert.Vue

<template>
    <div>

     <div :class ="alertClasses" v-show = "show">

         <slot></slot>

         <span class = "Alert_close" @click="show = false">X</span>
     </div>

    </div>
</template>



<script>

    export default  {

            props: ['type'],

            data: function() {

                return {
                    show: true
                };
            },

            computed: {
                alertClasses: function () {
                    var type = this.type;
                    return{

                        "Alert": true,
                        "Alert--Success": type == "success",
                        "Alert--Error": type == "error"
                    }
                }
            }

    }

</script>

Answer 1

Fresh re-install of the most curruent versions of node,gulp and vueify turned out to be the solution.