I have gone through one of stackoverflow post which has similar context here.

• What I am trying to is that I want to compare my form with the initial value we have which is passed from parent.
• In vue, data is passed from child, and child cannot update parent data, something called
  One-Way Data Flow.
• Now, here is main question how we should store or pass data to child to compare it with new values.

Is there any better way of doing it apart from how I have done it?

• CurrentUser and User both are same object the reason I have currentUser is to use it for comparision, there no other use so, I am looking for is there nany better way where we don’t need this variable? or this approach is fine.
• Below is an example code. Codesandbox

Parent component

Page.vue
<template>
  <p>Parent</p>
  <Userform :currentUser="currentUser" :user="user" />
</template>

<script setup>
import Userform from "./Userform.vue";
import { ref, reactive } from "vue";

const currentUser = reactive({
  name: "test",
});

const user = reactive({
  name: "test",
  type: "internal",
});
</script>

Child component

UserForm.vue
<template>
  <p>child</p>
  
  <input type="text" v-model.trim="user.name" />
  <p v-if="isInvalidName">Name cannot be empty</p>
  <p>Current user: <pre>{{currentUser}}</pre></p>

  <p>User: <pre>{{user}}</pre></p>
  <button :disabled="isInvalidName || isSameName">submit</button>
</template>
<script setup>
import { defineProps, computed } from "vue";

const { currentUser, user } = defineProps({
  currentUser: {
    type: Object,
    required: true,
  },
  user: {
    type: Object,
    required: true,
  },
});
const isInvalidName = computed(() =>{
  return user.name == ""
})

const isSameName = computed(() => {
  return user.name == currentUser.name
})
</script>