Spring Thymeleafのhtmlの中でvueを書きたい。

実現したいこと

Spring Thymeleafのhtmlの中でvueを書きたい。
現状、vueのビルド先をspringのresources/static配下にbuildするようにして
springのtemplatesのindex.htmlをたたくとVueのスタート画面を開くように出来ています。
他のhtmlもvueが対応できるように書きたいと思っているのですが、どのように書き埋め込んだらいいかわかりません。thymeleafのhtmlと同じファイルにvueの記載もしたいのですが。。。

こちらの記事を参考にしています
https://qiita.com/kaburankattara/items/607c7bd77fda2491d342

発生している問題・分からないこと

indexの書き方はわかったのですが、それ以降のファイルの書き方がわかりません。
試しにlogin.htmlを作り,controllerで/loginに遷移するようにして
login.htmlの中身をvueぽくやりましたがどうやればいいか見当もつかず、、

該当のソースコード

index.html
1<!doctype html>
2<html xmlns="http://www.w3.org/1999/xhtml"
3      xmlns:th="http://www.thymeleaf.org">
4  <head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width,initial-scale=1">
8    <link rel="icon" href="/favicon.ico">
9    <title>vue</title>
10    <script defer="defer" th:src="@{/js/chunk-vendors.js}"></script>
11    <script defer="defer" th:src="@{/js/app.js}"></script>
12    <link th:href="@{/css/app.css}" rel="stylesheet">
13  </head>
14  <body>
15    <noscript>
16        <strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17    </noscript>
18    <div id="app"></div>
19  </body>
20</html>
21こちらはbuild成功しvueの画面が表示済み

login.html
1<!doctype html>
2<html xmlns="http://www.w3.org/1999/xhtml"
3      xmlns:th="http://www.thymeleaf.org">
4  <head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width,initial-scale=1">
8    <link rel="icon" href="/favicon.ico">
9    <title>vue</title>
10    <script defer="defer" th:src="@{/js/chunk-vendors.js}"></script>
11    <script defer="defer" th:src="@{/js/app.js}"></script>
12    <link th:href="@{/css/app.css}" rel="stylesheet">
13  </head>
14<meta charset="UTF-8">
15<title>ログイン画面</title>
16</head>
17<body>
18<h2>ログイン画面</h2>
19{{ mes }}
20</body>
21</html>
22<script setup>
23    const mes = "aaa";
24</script>