Question: I have a very simple app:

```
<div id="show_vue">
    <page-change page="bio" @click="changeThePage"></page-change>
    <page-change page="health" @click="changeThePage"></page-change>
    <page-change page="finance" @click="changeThePage"></page-change>
    <page-change page="images" @click="changeThePage"></page-change>
</div>

Vue.component("page-change", {
    template: "<button class='btn btn-success'>Button</button>",
    props: ["page"]
})

var clients = new Vue({
    el: '#show_vue',
    data: {
        currentRoute: window.location.href
    },
    methods: {
        changeThePage: function() {
            console.log("this is working")
        }
    }
})

```

...but when I click the `<page-change></page-change>` button, nothing is logged to the console. I know I'm missing something simple but I'm not getting any errors.

**How do I make my click fire `changeThePage`**

Answer: 
The best way to do this is to use the `.native` event modifier.

For example:

```
<my-custom-component @click.native="login()">
  Login
</my-custom-component>

```

Source: <https://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components>
apparently `v-on:click` seems to work better with the `.native` event modifier.

try `page="bio" v-on:click.native="changeThePage()"></page-change>`. It worked for me.