Vue3でv-modelを使ってオブジェクトを連動させたい

前提・実現したいこと

v-modelを使って子コンポーネントにオブジェクトを渡してフォームを作りたい

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

propsとして子に渡っているが、inputと連動しない

該当のソースコード

親コンポーネントがApp.vueで子コンポーネントがForm.vueです。
以下App.vueです

<template>
  <Form v-model:auth="state" />
</template>

<script>
import Form from "./components/Form.vue";
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    const state = reactive({
      email: "email",
      password: "password",
    });

    return { state };
  },
  components: {
    Form,
  },
};
</script>

以下Form.vueです

<template>
  <p>email: {{ auth.email }}</p>
  <p>password: {{ auth.password }}</p>
  <input type="email" @input="inputEmail" :value="auth.email" /><br/>
  <input type="password" @input="inputPassword" :value="auth.password" />
</template>

<script>
export default {
  props: {
    auth: Object,
  },
  setup(props, { emit }) {
    console.log(props.auth);

    const inputEmail = e => {
      emit("update:auth.email", e.target.value);
    };

    const inputPassword = e => {
      emit("update:auth.password", e.target.value);
    };

    return { inputEmail, inputPassword }
  },
};
</script>

試したこと

refにして２つに分ければできました。console.logでは値が確認できるので
emitのところに問題があると思っています

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

解決案

下記のようにして、inputEmailもinputPasswordもemitするのはauth自体にする。

Javascript
1const inputEmail = e => {
2  const updatedAuth = Object.assign(props.auth, { email: e.target.value });
3  emit("update:auth", updatedAuth);
4};
5
6const inputPassword = e => {
7  const updatedAuth = Object.assign(props.auth, { password: e.target.value });
8  emit("update:auth", updatedAuth);
9};

解説

mentanpinsanさんが実装されているemit("update:auth.email", e.target.value); のように、v-modelで渡されている値に対して、そのプロパティを参照するような形でemitしたものが反映される仕組みになっているかは疑問です。
もちろん無いとは言い切れないのですが、今の所そういった記法は存じ上げないので別のアプローチを検討しました。
update:authの形であれば間違いはないので、inputEmailとinputPasswordのemitの前に１行噛ませて、変更した内容を反映したauthの値そのものを扱うように変更しました。
これによってデータのやり取りが上手くいくことを手元で確認しています。