How to handle events using Electron + Vue (SPA)
<p>I am having problems figuring out how to handle events when using Vue together with Electron. It may seem stupid, but I have spent time reading the docs, testing Vue instances and directives in the browser which works fine but the same principles won't work in my electron desktop app (this is so much different then Php OOP).</p>

<p>I use the <a href="https://github.com/SimulatedGREG/electron-vue" rel="nofollow">electron-vue</a> boilerplate, set it up, works like a charm. Created a template and a component (TopMenu), now I need to handle the click event of the menu buttons placed into my TopMenu component, but no matter how I try, I get:</p>

<blockquote>
  <p>[Vue warn]: Property or method "say" is not
  defined on the instance but referenced during render. Make sure to
  declare reactive data properties in the data option. (found in
  component )
  [Vue warn]: Handler for event "click" is undefined. </p>
</blockquote>

<p>./LandingPageView/TopMenu.vue:</p>

<pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;button type="button" name="button" v-on:click="say"&gt;BUTTON&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>

<p>main.js:</p>

<pre><code>import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'

import App from './App'
import routes from './routes'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true

const router = new Router({
  scrollBehavior: () =&gt; ({ y: 0 }),
  routes
})

/* eslint-disable no-new */
new Vue({
  methods: {
    say: function () {
      alert()
    }
  },
  router,
  ...App
}).$mount('#app')
</code></pre>

<p>App.vue:</p>

<pre><code>&lt;style&gt;
  @import url(https://fonts.googleapis.com/css?family=Lato:400,700);

  * {
    margin: 0;
    padding: 0;
  }

  html,
  body { height: 100%; }

  body {
    align-items: center;
    background:
      radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(229, 229, 229, .85) 100%
      );
    background-position: center;
    font-family: Lato, Helvetica, sans-serif;
  }
&lt;/style&gt;

&lt;template&gt;
  &lt;div&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import store from 'src/vuex/store'

  export default {
    store
  }
&lt;/script&gt;
</code></pre>

<p>index.ejs:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;%= htmlWebpackPlugin.options.title %&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;!-- webpack builds are automatically injected --&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>