Console Errors: [Vue warn]: Property or method is not defined on the instance but referenced during render

Firstly I'm Laravel Spark and have successfully integrated into the mix installation so my js is being deployed into app.js already

I am getting errors when I setup a new component for a project;

blade file

@extends('spark::layouts.app')

@section('content')


    <div class="container">
        <!-- Application Dashboard -->
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Sprints</div>

                    <div class="panel-body">

                        <os-sprints></os-sprints>



                          <input type="text" v-model="newSprint"> 
                          <button @click="addSprint">add</button>


                    </div>
                </div>
            </div>
        </div>
    </div>


    <template id="my-sprints">

      <ul class="list-group">

        <li class="list-group-item" v-for="sprint in sprintlist">
          <a :href="'/sprints/' + sprint.id">@{{ sprint.title }} @{{ sprint.id }} </a>
        </li>

      </ul>

    </template>



@endsection

and my js

Vue.component('os-sprints', {

    template: '#my-sprints',

    data() {

        return {
          sprintlist: [],
          newSprint: ''
        };
    },


    created() {
        this.getSprints();
    },

    methods: {


        getSprints() {


          axios.get ('/api/team/sprints')
            .then(response => {
              this.sprintlist = response.data;
            });


        },


        addSprint() {

          alert("hit");


          // this.sprintlist.push(this.newSprintname);
          // this.newSprintname = '';


        },


    }


});

The errors I'm getting in console;

app.js:42229 [Vue warn]: Property or method "newSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)
warn @ app.js:42229
app.js:42229 [Vue warn]: Property or method "addSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)
warn @ app.js:42229
app.js:42229 [Vue warn]: Property or method "sprintlist" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)
warn @ app.js:42229
app.js:42229 [Vue warn]: Invalid handler for event "click": got undefined

I'm getting a sprintlist data fine but even without the text field and button I'm getting errors and my button method never hits.

Any feedback would be greatly appreciated

Chris!

This type of warning is usually caused by a variable not being defined yet. (I know, not very helpful). What I mean:

1. You passing a variable from one component A to another component B
2. While a variable is still being passed (have not reached the desired component B), component B is already being mounted
3. since a component B is already mounted, it is trying to use a variable that hasn't reached yet (ta da -> a warning)
4. Then a variable reached, Vuejs reacted and updated the view accordingly

This warning can be avoided by adding a v-if to an element or a wrapper