SOURCE

const log = console.log;
const App = {
    data() {
        return {
            message: "Hello Element Plus",
            list: Object.keys(ElementPlus),
        };
    },
    setup() {
        const { reactive, ref, computed, effect, readonly } = Vue
        const original = { foo: 0 }
        const observed = reactive(original)
        const oRef = ref(0)
        const getter = computed(() => observed.foo + oRef.value)
        // effect(() => {
        //     console.log('trigger effect', getter.value)
        // })

        var target = {name: 'wangdp'}
        var readonlyTarget = readonly(target)
        target.name = 'roy'
        readonlyTarget.name  = 'roy'
        log(target , readonlyTarget)
    }
};

const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");

<!-- 引入vue3 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- elp引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
<!-- elp引入组件库 -->
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>


<div id="app">
    <el-button>{{ message }}</el-button>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>