Vue version

3.2.43

Link to minimal reproduction

https://sfc.vuejs.org/#eNq1Vt1qG0cUfpVBNyuDvJvmqgitaXB64YuW0h8oWMGsd89Kk+zPdGbWkRG6aSlOA03TgtuLpoVASwtNSwKlxc5FXiaS/Bg9M7O72V2t5SoQX6w8P+ec73xzzsw37dxgzD7KoNPvDITPKZNEgMzYzjChMUu5JFPCISQzEvI0JhZutcql3TRm+bztqIHyhMt+mghJfE/CKOXHxCXTYULIOM14n1jqx+qpicA7xjF+0WRWWEkaw3sgOfUFGmLobuHHVpZbxT4BEfgSgt00yuKk2Ls/lVRGoNxCnFqzHrFtO/buwMfeYQT53m4lhn3kRRls3Sr9+pjGh5iw8YfTYZb4kqYJGXtJEMEnLEA8XXnMYMvkRUM9Iq7rrjomU450cpUfqeZmljGKMlVrKnoagR2loxZ8akcjY7Pikv+ZssJ7qxnIYh6HRFq9duc6bE6ImbFpQqViBfMpiVnHb85RBFKffz5rNmL2+xqSWs0S+tluRP07+WJz7aNxerdpR0NSjaVOoKw6Uy0muqm9ldhmiWCFFwzOn36z+OEfpAPP2NtLApiUBUvu0kCO++St69d6BCYMi6FPJM+gR0I6gXLgRXSUoJWPvEJe6Opvlv+ngc8IRAIKcM3U27EtPz+bnzx/eX6+OH2KcJpxSnzXEF8VvvKewYGvA+C+OhITvUFuCzHPTpe/nL92cKH847Y6CepjuqMIiZW7clK5ySssiwe/z89eXPz1eH7vu/nDr5e/KUTVoL4XMw8Bvu/F0AZ2zenleVxXeUAUUSaoMGsl9gopZy/m395f/vn98vTXvZsNENhjmeqOveAVPW9vVjqbIWilokDxJmm4cfPTRlSY+HhZjjYlvx6p2nEtUZd//Pzy+b+mHKuxD2mgKu2yClVHcJmziy8ezU/Olw9OGt2+4qsZ70Bkvg9CHHAPya7UebOBFk8er28gBa92fo3GwQZp9OtqLvqe2DjS6v2Qx6reTJcEq1HW6rhkpgGnhamL+88u/j7bBHkq8AVbdbT48af5l18t7j1cPHqyxprFbbFaasTweqU7/3J3eO3hpTdwjNBCiYUDCTGL8M3CEVF7BpF3CBEJU+6al4e8oxnEUVV/1J85a0f9DBxtqzyRAU1YhmoKn33X4l6A5JME70MXb0djaREaFCH6RktYlcfUIsQxniqAlFa7Ag9uQTj4vQpNKxwdoBVNDkZLTlRmaGh0CW73jexwrYaIMUYDp6S40+sY5bode8y+LdIEZa9+hIf5ghh2+sWzPOygmlXjYWcsJRN9xxGhryTubWGnfOTgfzbPEgXTBhFvH3LsSuDoeNjJy0f7cHDyCPg2Sq0AOPB1PhtbV/zmD+cMUykE91XSvRdASBP4gKdMYLHqwbsTlgp1xXrSH9e1vZHBTO1GLVCx7e4j54ZYJZcrAlCLQlwr1F5NYvpjGgXGHzaC/rVzP0ZHEoOi290i7k59Q0/P5edR86pNrF7THZKD32qO3alCp2YrfVfrukFAj3RxEQ1Vl5lj5qq1M/sPwZ2omQ==

Steps to reproduce

1. click f12 to look console
2. click hour / day input to switch mode parent component ref while updated, child component will receive parent component ref child component expose a function which read props
3. child component exposed function read props not updated correctly

What is expected?

child component read props correctly, which means props is equal to passed props by parent component

What is actually happening?

props is not equal to parent component data

System Info

No response

Any additional comments?

No response

- function handleUpdate(type) {
+ async function handleUpdate(type) {
    if(type ===timeMetrics.value) {return}
    timeMetrics.value = type
    console.log(timeMetrics.value)
    selectedColumns.value= [{title: 'demo'}, ...makeTableColumns(type)]
    console.log('parent', selectedColumns.value)
+   await nextTick()
    compRef.value.init()
}

You need to wait for the Comp to finish updating.

- function handleUpdate(type) {
+ async function handleUpdate(type) {
    if(type ===timeMetrics.value) {return}
    timeMetrics.value = type
    console.log(timeMetrics.value)
    selectedColumns.value= [{title: 'demo'}, ...makeTableColumns(type)]
    console.log('parent', selectedColumns.value)
+   await nextTick()
    compRef.value.init()
}

You need to wait for the Comp to finish updating.

thx for reply, i main if there is another way to refresh child component will be more effectual, real code will do something in child component onMount function to make something only once, when i use key in child component is also cause error

in this demo , just switch input radio frequently can use component key to accomplish my point?

@RosApr I'm sorry! I can't follow your point.

In Vue, when the component's state changes, the component is updated asynchronously. So if you want to get the latest props, you must wait for the component to finish updating.

@RosApr I'm sorry! I can't follow your point.

In Vue, when the component's state changes, the component is updated asynchronously. So if you want to get the latest props, you must wait for the component to finish updating.

got it! thx