Vue.js 3のcreateAppの正しい使い方が知りたい。Vue.js 2のようにvue.min.jsファイルを取得したい

##質問1
HTMLの各要素に別のデータを入れたい場合、
以下のようにVue.createAppを乱立させるのは
ルールと言うかお作法的には問題ないのでしょうか?

それとも<div id="app"></div>を1つ作って、
一元管理すべきなのでしょうか?

1つに無理矢理まとめることも可能なのですが、
コードが煩雑になってしまうため、要素ごとに
Vue.createAppを使いたいと思い、質問させていただきました。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <link rel="stylesheet" href="./style.css" />
8    <script src="https://unpkg.com/vue@next"></script>
9    <title>Document</title>
10  </head>
11  <body>
12    <div id="header">{{headerMessage}}</div>
13    <div id="footer">{{footerMessage}}</div>
14    <script>
15      Vue.createApp({
16        data() {
17          return { headerMessage: "ヘッダーテキスト" };
18        },
19      }).mount("#header");
20
21      Vue.createApp({
22        data() {
23          return { footerMessage: "フッターテキスト" };
24        },
25      }).mount("#footer");
26    </script>
27  </body>
28</html>