vue3でオブジェクトの代入をリアクティブにしたい

Question

前提・実現したいこと

objectの代入をリアクティブにしたい

発生している問題・エラーメッセージ

consoleでは値がはいっているが、再描画されない

該当のソースコード

<template>
  <p>{{ obj }}</p>
  <button @click="objHandler">click</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    let obj = reactive({})
    const test = {name:"tom", id: "asdf"}
    const objHandler = () => {
      obj = { ...obj, ...test }
      console.log(obj)
    }

    return {
      obj, objHandler
    };
  },
};
</script>

reduceを使ってみましたが反映されませんでした。どうすればいいでしょうか？

Answer 1

Vue について詳しくないのですが、代入してしまってはダメなのではありませんか？
たとえば、Object.assign(obj, test)とすれば動作するのではないでしょうか。
（この書き方が、Vue の書き方としてお行儀が良いかどうかは分かりません。）

Comments

[mentanpinsan]

ありがとうございました。うまく動作しました。