Why is object not defined?

Question

I want to try Vue.js 2 and started with a simple example. I've took this one from here https://jsfiddle.net/gmsa/gfg30Lgv/ and created a simple project with it. After I divided this code into files the project doesn't work. So I've made a data property a function:

    data: function(){
        return {
            tabs: [{
                name: "tab1",
                id : 0,
                isActive: true
            }],
            activeTab: {}

        }    
    },

But there's an error in a console: Uncaught ReferenceError: newTab is not defined.

Project: https://github.com/rinatoptimus/vue-webpack-delete

File QueryBrowserContainer:

<template>
 <div id="queryBrowserContainer">
    <p>queryBrowserContainer text</p>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" v-for="tab in tabs" :class="{active:tab.isActive}">
            <a href="#" role="tab" data-toggle="tab" @click.stop.prevent="setActive(tab)">{{ tab.name }}</a>
        </li>
        <li>
            <button type="button" class="btn btn-primary" @click="openNewTab">New tab</button>
        </li>
    </ul>
    <div class="tab-content">
        <div v-for="tab in tabs" role="tabpanel" class="tab-pane" :class="{active:tab.isActive}">
            <app-querybrowsertab :tab="tab"></app-querybrowsertab>
        </div>
    </div>
    <pre>{{ $data | json }}</pre>
</div>
</template>

 <script>
import QueryBrowserTab from './QueryBrowserTab.vue';
export default {
    data: function(){
        return {
            tabs: [{
                name: "tab1",
                id : 0,
                isActive: true
            }],
            activeTab: {}

        }    
    },


    ready: function () {
        this.setActive(this.tabs[0]);
    },

    methods: {
        setActive: function (tab) {
            var self = this;
            tab.isActive = true;
            this.activeTab = tab;
            /*this.activeTab.isActive = true;
            console.log("activeTab name=" + this.activeTab.name);*/
            this.tabs.forEach(function (tab) {
                if (tab.id !== self.activeTab.id) { tab.isActive = false;}
            });
        },
        openNewTab: function () {
            newTab = {
                name: "tab" + (this.tabs.length + 1),
                id: this.tabs.length,
                isActive: true
            };
            this.tabs.push(newTab);
            this.setActive(newTab);
            /*this.activeTab = newTab;
            console.log("### newtab name=" + newTab.name);*/

        },
        test: function() {
            alert('676767');
        },
        closeTab: function () {
            console.log("### CLOSE!");
        }
    }
}

File QueryBrowserTab:

<template>
 <div>
    <p>querybbbTab</p>
    <h3>{{tab.name}}</h3>
    <h3>{{tab.id}}</h3>
 </div>
</template>

<script>
    import QueryBrowserContainer from './QueryBrowserContainer.vue';
    export default {
        data: function () {
            return {
                databaseOptions: [],
            };
        },
        props: ['tab'],

        methods: {},
       components: {
            'app-querybrowsercontainer': QueryBrowserContainer
        }
    }
</script>

File App:

<template>
  <div id="app">
    <app-message></app-message>
    <app-querybrowsertab></app-querybrowsertab>
    <app-querybrowsercontainer></app-querybrowsercontainer>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {}
    }
  }
</script>

Answer 1

It seems in file: QueryBrowserTab, you have not passed tab props, but you are using it, make sure you pass tab as props from whatever places you are using it.

As stated in the docs here, you can pass props to a component like following:

<app-querybrowsertab :tab="tab"></app-querybrowsertab>

which you are already doing in app-querybrowsercontainer,but in file App, you are not passing the prop, which might be the source of error for you.