Vuejs - Two way binding không hoạt động

[cuikho210 (Sinh Đỗ)]

Mình đang sử dụng Vue3.
Mình gặp phải một lỗi khi mà tính năng two way binding không hoạt động tại App.vue

Mình có đoạn code sau tại App.vue

<template>
    <p>{{ data.title }}</p>
</template>

import store from '@/js/store'

export default {
    data () {
        return {
            data: store.getAll()
        }
    }
}

Tại store.js

const data = {
    ...
}

class Store {
    ...

    getAll () {
        return data
    }
}

export default new Store()

Two way binding vẫn hoạt động bình thường đối với các biến thông thường, thế nhưng đối với 1 object từ bên ngoài như data thì không hoạt động (Dù điều này vẫn hoạt động bình thường tại các Component khác). Dường như nó chỉ nhận về dữ liệu ban đầu của data.

Làm thế nào để two way binding hoạt động? (Hoặc lắng nghe sự thay đổi của data)

[cuikho210 (Sinh Đỗ)]

Mình đã tìm ra vấn đề rồi. Việc bind dữ liệu 2 chiều như đoạn code ví dụ trên của mình hoạt động bình thường ở các component được hiển thị trong thẻ <router-view />, còn bên ngoài App.vue thì sẽ gặp sự cố đối với chuỗi. Nếu tìm cách để delay 1 chút thời gian từ 50-100ms trước khi hiển thị giá trị bằng cách sử dụng v-if thì vấn đề sẽ được giải quyết. Giải pháp mình lựa chọn là thay thế class store mình tự viết bằng vuex