在VueJs中未定义_vm.myFunction

Question

我是VueJs世界的新手，我对v-on：click函数有疑问。 这是一个示例：

JS和HTML

var myNav = new Vue({
    el: '#componentNav',
    methods: {
        currentComponentChanger: function (pageName) {
            alert(pageName)
        }
    }
});

var myPage = new Vue({
    el: '#mainComponents',
    data: {
        currentComponent: 'home'
    }
})

 <nav id="componentNav">
            <ul>
                <li class="active li"><a class="home active"><button v-on:click="currentComponentChanger('home')">Acceuil</button></a></li>
                <li class="li"><a class="tower"><button v-on:click="currentComponentChanger('tower')">Tower Ascension</button></a></li>
                <li class="li"><a class="faq"><button v-on:click="currentComponentChanger('faq')">F.A.Q.</button></a></li>
                <li class="li"><a class="follow"><button v-on:click="currentComponentChanger('follow')">Nous suivre</button></a></li>
            </ul>
        </nav>

使用currentComponentChanger（）函数代替警报，发生错误并显示“ _vm.currentComponentChanger未定义”。我不明白为什么，而且我对正式离职的例子也有同样的疑问。