vue.jsでサーバーへpostを行いたい

前提・実現したいこと　＆　発生している問題

vue.jsでサーバーにpostを行いたいと思っています。getは行えます。
vue.jsでのpostの方法としてイメージしている流れとしては、以下のように考えています。

①getしたページでformをtemplateに埋め込む
②formがsubmitされた時にmethodに値を渡す
③axios.postで値をpostする

現在、②の部分でつまづいており、formに仕込んだv-on:click='method'がうまく発火しないようで困っています。
今回vue.jsでssrをするにあたって、以下のページを参考にしました。
Vue SSR ガイド

postの実装については以下のサイトも参考にしました。
Vue.jsでGETとPOSTを実装する
 Vue.jsで配列の値をAPIでPOSTする方法

詳細なコードは以下に掲載します。

該当のソースコード

javascript
1// index.js
2const Vue = require('vue')
3const express = require('express')
4const server = express()
5const fs = require('fs')
6
7const renderer = require('vue-server-renderer').createRenderer({
8  template: fs.readFileSync('./index.template.html', 'utf-8')
9})
10
11server.get('/', (req, res) => {
12  const app = new Vue({
13    data: {
14      url: req.url
15    },
16    // @click='clickEvent()'を仕込む
17    template: `
18      <div>
19        <div>Hello World</div>
20        <button @click='clickEvent()'>click this</button>
21      </div>
22    `,
23    methods: {
24      clickEvent: function() {
25        // buttonがクリックされても表示されない = methodが発火していない
26        console.log('clicked')
27      }
28    }
29  })
30  const context = {
31    title: 'hello'
32  }
33  // render the vue instance to HTML
34  renderer.renderToString(app, context, (err, html) => {
35    if (err) {
36      console.log(err)
37      res.status(500).end('Internal Server Error')
38      return
39    }
40    res.end(html)
41  })
42})
43
44server.listen(8080, '127.0.0.1')
45console.log('server is running at http://127.0.0.1:8080')

html
1<!-- index.template.html -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <title>{{ title }}</title>
6  </head>
7  <body>
8    <!--vue-ssr-outlet-->
9  </body>
10</html>

package.jsonは以下の通りです。

json
1{
2  "name": "vue_test",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "",
10  "license": "MIT",
11  "dependencies": {
12    "express": "^4.16.4",
13    "fs": "0.0.1-security",
14    "vue": "^2.5.21",
15    "vue-server-renderer": "^2.5.21"
16  }
17}

http://127.0.0.1:8080/ にアクセスすると、以下のように表示されます。

ここでclick thisを押しても、methodsのclickEvent()に配置されたconsole.log('clicked')がターミナル上に表示されないので（検証のconsoleにも表示されません）、clickEvent()まで到達していない様子です。

chromeの検証では以下のように表示され、buttonにonclickがないことがわかります。

templeteに仕込んだv-on:clickが正常に動作するにはどのように対処すれば良いのでしょうか？

試したこと

ここに問題に対して試したことを記載してください。
以下のページを参考に、vue-cliも利用してみました。
Vue.js を vue-cli を使ってシンプルにはじめてみる

ここで作成された、app-directory/src/componentsにあるvueファイルでも同様に、
v-on:clickでbuttonを作成し、同一ファイル上のscriptにmethodを定義したのですが、
こちらでは正常に動き、chromeのconsoleにログを確認できました。

フロントのbuttonでフロントのmethodsは発火させることはできるが、
フロントのbuttonでサーバー側で定義されているmethodsを発火させることはできない、といったことがあるのでしょうか？

補足情報

再現は以下の順序を辿って簡単にできると思います。
①npm init
②npm install vue --save
③npm install vue-server-renderer --save
③npm install express --save
④npm install fs --save
⑤npm install
⑥上記のindex.jsを用意する
⑦上記のindex.template.htmlを用意する
⑧node index.jsでサーバーを起動する
⑨http://127.0.0.1:8080/にアクセス