Vue.js - cannot add click event - onclick

Question

I'm trying to add click event listener for DOM. All the scripts are bundled with webpack which compiles it to 1 large file.
This is my component:
<template>
<div class="formchat-window">
<a>test</a>
<div class="title" v-on:click.self="toggle">Nevíte si rady? Zeptejte se!</div>
<wp-formchat-screen v-if="windowActive"></wp-formchat-screen>
</div>
</template>
<script>
export default {
mounted () {
console.log('mounted');
},
methods: {
toggle(event) {
alert('click on toggle');
this.windowActive = !this.windowActive;
}
},
data() {
return {
windowActive: false,
};
}
}
</script>
<style lang="scss">
$color: red;
.formchat-window {
position: fixed;
right: 10%;
bottom: 0;
width: 300px;
z-index: 9999;
.title {
background: $color;
}
}
</style>
This is my main JS file:
import Vue from 'vue'
import FormChat from './FormChat'
import FormchatAnswer from './components/FormchatAnswer'
import FormchatEntry from './components/FormchatEntry'
import FormchatScreen from './components/FormchatScreen'
import FormchatWindow from './components/FormchatWindow'
window.Vue = Vue;
console.log('test');
Vue.component('WpFormchatAnswer', FormchatAnswer);
Vue.component('WpFormchatEntry', FormchatEntry);
Vue.component('WpFormchatScreen', FormchatScreen);
Vue.component('WpFormchatWindow', FormchatWindow);
const app = new Vue({
el: '#wp-formchat-vue-root',
//render: h => h(FormChat)
});
However I did everything and compiler works perfectly, I cant register the click, so the method won't trigger.
Can anyone please help me?

Answer 1

I have finally figured it out. In the console, there was a warning about component name and main filename. I have renamed main file and the Vue started to work again.
Beware of ambigious naming :)