vueコンポーネントについて

Vueのmethodsをすべての画面共通で使う処理と
画面でしか使用しない、または処理を変更するものとに分けて記述したいと思い
以下の記述を試したところ、画面共通部分に記述したmethodsは読み込まれるのですが
各画面ごとに記述したmethodsは無視されてしまいました。
(実際に各画面で読み込んでいる処理を共通部分に移動させたところエラーを消えたのを確認しております)

各部品の読み込みはtymeleafを使用して行おうと考えております。

画面共通部分

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org" th:fragment="meta_body(title,body,link,script)">
3	<head th:replace="common/header :: meta_header(${title},~{::link},~{::script})">
4	</head>
5	<body>
6	    <div id="app">
7
8		<!-- 各ページ本体 -->
9		<div class="content">
10			<div th:replace="${body}"></div>
11		</div>
12
13	    </div>
14	</body>
15	<script type="application/javascript" th:inline="javascript">
16		/*<![CDATA[*/
17		let bodyFunc = new Vue({
18			el: '#app',
19			data: {
20				// 割愛
21			},
22			methods: {
23				// 共通で使いたい処理を記述
24			}
25		})
26		/*]]>*/
27	</script>
28</html>

各画面のうちの一つ

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org" th:replace="common/template :: meta_body('main',~{::body/content()},~{::link},~{::script})">
3	<body>
4		<template>
5			<el-form></el-form>
6			<div th:replace="components/tableComponent :: meta_table(null,true,true,true)">
7			</div>
8		</template>
9		<script type="application/javascript">
10			/*<![CDATA[*/
11			new Vue({
12				// 各画面ごとの固有の処理
13				methods: {
14					createData() {
15
16					},
17					detailData() {
18
19					},
20					deleteData() {
21
22					}
23				}
24			})
25			/*]]>*/
26		</script>
27	</body>
28</html>

実際に記述したメソッドを使用している部品

html
1<div th:fragment="meta_table(tableData, createFlg, editFlg, deleteFlg)">
2	<div class="tableButtonArea">
3		<el-button th:v-show="${createFlg}" @click="createData">新規登録</el-button>
4		<el-button th:v-show="${editFlg}" @click="detailData">編集・詳細</el-button>
5		<el-button th:v-show="${deleteFlg}" @click="deleteData">削除</el-button>
6	</div>
7</div>