herokuにアップしたらjs(vue)が動かなくなった

前提・実現したいこと

ローカル環境ですと動くのですがherokuにUPすると動きません

ボタンを押すと追加のフォームを表示させるようにしていましたが
heroku上ですとボタンを押しても追加表示されません。

発生している問題・エラーメッセージ

js
1[Vue warn]: Property or method "tableEdit" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
2
3(found in <Root>)
4warn @ script.js:1485
5script.js:1485 [Vue warn]: Invalid handler for event "click": got undefined
6
7(found in <Root>)
8

該当のソースコード

html
1<button type="button" class="" @click="tableEdit">追加登録する</button>

js
1window.Vue = require('vue');
2
3const app = new Vue({
4    el: '#app',
5    data: {
6
7    },
8    methods: {
9        //編集ページのメッセージ登録テーブル追加用
10        tableEdit: function () {
11            let app = document.getElementById("app");
12            let message = document.getElementById("message");
13            let table = document.getElementById("table");
14            let addtable = table.classList.remove('u-none');
15            let addtable2 = app.firstElementChild.cloneNode(true);
16            message.appendChild(addtable2);
17            table.classList.add('u-none');
18        }
19    }
20});