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

Question

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!

Answer 1

This type of warning is usually caused by a variable not being defined yet. (I know, not very helpful). What I mean:
You passing a variable from one component A to another component B
While a variable is still being passed (have not reached the desired component B), component B is already being mounted
since a component B is already mounted, it is trying to use a variable that hasn't reached yet (ta da -> a warning)
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

Answer 2

That's because you reference your data object properties and methods of a child component in parent component.
Move
<input type="text" v-model="newSprint">
<button #click="addSprint">add</button>
into your child component's template and you should be fine.

Answer 3

Ok I worked it out, I had tried to do what MatWaligora had suggested previously but the issue was I didn't realise I needed a single "parent" within the template. After I changed it to the below I got the functionality working. I'm still getting Vue warning messages as above but the page works.
<template id="my-sprints">
<div>
<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>
<input type="text" id="sprinttext" v-model="newSprint">
<button #click="addSprint">add</button>
</div>
</template>

Answer 4

For me it was an extra closing tag in the loop.
<div v-for="(item, index) in items" :key="index">
<a :href="item.url">{{ item.name }} </a>
</div> // <- the issue
</div>
Double check all tags if other answers didn't help you.