Vue.jsでこのような書き方ができるのでしょうか。教えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>サンプル</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<body>
    <div id="parent">
        <button v-on:click="alert1">クリック1</button>
        <button id="child" v-on:click="alert2">クリック2</button>
    </div>
</body>
<script>
    var parent = new Vue({
        el: "#parent",
        data: () => {
            return {
                data: ''
            }
        },
        methods: {
            alert1: function() {
                alert('alert1');
            }
        },
    });

    var child = new Vue({
        el: "#child",
        data: () => {
            return {
                data: ''
            }
        },
        methods: {
            alert2: function() {
                alert('alert2');
            }
        },
    });
</script>
</html>

親(parent)と子(child)にそれぞれ、vue.jsで処理をわけて書きたいです。
例えば、親にはカーセル機能をもたせて、その子にストップウォッチのようなタイマー機能をいれるみたいな感じで利用したいと思っています。

が何なのか分かりませんが、多分なんとでもできると思います。

1点教えてください。上記のようなソースの書き方はできないのでしょうか。ロードするとエラーとなってしまいます。

カーセル機能は、vue-carousel を利用しようと思っております。
その中にタイマーを作成して、それぞれにidを振りたいのですが、このやりかただとエラーになります。

多分ダメでしょうね。parent が管理してる DOM の中に child がいるので。

error message に理由が書かれてると思いますよ。

cursor か carousel だろうなと予想してました。カタカナ英語だと「カルーセル」とよく書かれています。

間違いです。すいません。ご指摘ありがとうございます。

問題は、解決しました。大変、助かりました。