【Vue.js】同じVueインスタンスを複数の要素に使うことは可能ですか？

Question

現在、Vue.jsを使用してHTMLを書き換えているところなのですが、
Vueインスタンスを複数の要素に適用させたいです。
やりたいことは下記のようなイメージです。

var test= new Vue({
    el: '.test',
    data: {
        vue_test: dict["user_name"]
    }
})

<table>
    <tbody class="test">
        <tr>
            <td>
                <!-- こっちは表示できた -->
                <span v-cloak>{{ vue_test }}</span>
            </td>
        </tr>
    </tbody>
</table>

<!-- 省略 -->

<div class="test">
    <!-- こっちは{{ vue_test }}　と画面に表示されてしまう -->
    <p> {{ vue_test }} </p>
</div>

---

上記のコメントに書いた通り、クラス名使えば　複数要素にVueインスタンスを適用できるのかな？　と
安易に考えたのですが、最初の一つのみきちんと表示され、残りの要素は表示できませんでした。

複数個所に変数の中身を表示したい 場合はいくつもVueインスタンスを作成するのでしょうか？
それともHTML全体を大きなDivか何かで括ってしまうのでしょうか？

Vue.jsについて知識が乏しいため、参考サイトなどでも構わないので
お時間ある方いらっしゃいましたらご助力頂けますと幸いです。

Answer 1

こんにちは
https://jp.vuejs.org/v2/guide/index.html

公式のページにも書いている通り、vueでelに指定するDOM要素は単一のもの（すなわちidか、重複のないclass）でなくてはならないようです

上記の実現の仕方ですが、よくあるパターンはvueを含んだコードを一つの部品(component)として定義し、部品をimportする方法だと思います（ここらへんは vue componentなどでぐぐると出てくるかなと思います）