ブラウザだけで動作するVue 3のサンプル。以下の公式ドキュメントを参考にしました。

サンプル

Vue 3のサンプルは、このページになります。 また、このソースは以下になります。 Vue 3ではVue 2と異なり、createApp関数を使用します。また、dataの箇所は、data() { return ... } の形式にする必要があります。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue3のテスト</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app"></div>
    <div id="basic-event">
        <!-- '@click' は、'v-on:click' にすることもできる。 -->
        <button @click="counter += 1">ボタン1</button>
        <p>ボタン1のクリック数 {{ counter }} 回</p>
    </div>
    <div id="event-with-method">
        <button @click="greet">ボタン2</button>
        <br><br>
    </div>
    <div id="multiple-event">
        <button @click="one($event), two($event)">ボタン3 (+3)</button>
        <p>ボタン3のクリック数 {{ counter }} 回。 合計は {{ sum }}</p>
    </div>

    <script>
        const app = Vue.createApp({
            template: '<p>{{msg}}</p><br>',
            data() {
                return { msg: 'これはVue3のテストです。' };
            }
        });
        app.mount('#app');

        // ボタン1: Listening to Events
        const bt1 = Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            }
        })
        bt1.mount('#basic-event');

        // ボタン2: Method Event Handlers
        Vue.createApp({
            data() {
                return {
                    name: 'Vue.js'
                }
            },
            methods: {
                greet(event) {
                    // `this` inside methods points to the current active instance
                    alert('Hello ' + this.name + '!')
                    // `event` is the native DOM event
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        }).mount('#event-with-method')

        // ボタン3: Multiple Event Handlers
        Vue.createApp({
            data() {
                return {
                    counter: 0,
                    sum: 0
                }
            },
            methods: {
                one(event) {
                    this.counter += 1;
                },
                two(event) {
                    this.sum += 3;
                }
            }
        }).mount('#multiple-event')
    </script>
</body>

</html>

Vue 2のサンプルは、以下になります。

Reactで同じ機能を実装したサンプルは、以下になります。

フィルター

Vue 3では、フィルターが使用できなくなりました。代わりに関数をcomputedで定義して使用します。

例 

 <script src="https://unpkg.com/vue@3"></script>
 <div id="app"></div>
 
 <script>
     function showPrice(value) {
         return value + ' 円';
     }
 
     var items = [
         {
             name: 'みかん',
             price: 100,
             quantity: 2
         },
         {
             name: 'りんご',
             price: 200,
             quantity: 3
         },
     ];
 
     var app = Vue.createApp({
         template: `
             <dl v-for="item in items">
                 <dt>{{ item.name }}: {{ price(item.price) }} x {{ item.quantity }} = {{ price(sum(item)) }}</dt>
             </dl>
             <p>合計: {{ total }}</p>
         `,
         data() {
             return { items: items };
         },
         computed: {
             price() {
                 return function (item) {
                     return showPrice(item);
                 }
             },
             sum: function () {
                 return function (item) {
                     return item.price * item.quantity;
                 }
             },
             total: function () {
                 const value = this.items.reduce(function (sum, item) {
                     return sum + (item.price * item.quantity);
                 }, 0)
                 return showPrice(value)
             },
         }
     })
     app.mount('#app');
 </script>
この例では、computedで３つの関数を定義して、テンプレートでそれらを使用しています。
Vue 2 の場合、price関数をフィルタで定義すると、以下のようになります。 これをVue 3で実行すると、filterの定義は無視されてしまいます。 
          ...
          data() { ... },
          filters: {
              price: function (value) {
                  return showPrice(item);
              }
          },
          computed: {
          ...

価格表示用関数showPriceは、computedで定義せずに、外部で定義していますが、これは、以下のような外部モジュールとすることもできます。 ただし、importを使用する場合、scriptタグに tyep="module" を指定する必要があります。 

<script type="module">
    import { showPrice } from 'http://localhost/js/vue3_lib.js';

    var items = [
        ...

</script>
注意　IEでは、importを使えません。