loss of an object as reactive method - vue.js

Question

I am creating an application in which a user can create how to update a project, the application is being done with Vue 3 and Go, but I find a problem and that is that when I want to obtain the project data and then update the information it is generated An error, and it is that when obtaining the data from the api it does well because it shows me the information I want, the problem is when I refresh the page because the data is lost immediately.
this is an example of what the api returns me:
{
"id_project": 3,
"name": "gbhnju",
"description": "derftgyh",
"start_date": "2021-08-06T00:00:00Z",
"end_date": "2021-08-17T00:00:00Z",
"created_at": "2021-08-06T15:57:19.27Z",
"updated_at": "0001-01-01T00:00:00Z"
}
These values are returned, but when I update the page they are lost.
This is the component that makes the request to obtain the project data:
export default {
components: { EditProject },
setup() {
const route = useRoute();
const project = reactive({});
onMounted(() => {
fetch(`http://localhost:8000/api/v1/projects/${route.params.id}`)
.then((res) => res.json())
.catch((error) => console.error(error))
.then((data) => {
Object.assign(project, data);
});
});
return {
project,
};
},
};
</script>
And this is the component which receives the information to be able to update the data:
<script>
import { ref, toRef, toRefs } from '#vue/reactivity';
import { useRoute, useRouter } from 'vue-router';
export default {
props: {
project: {
type: Object,
required: true,
},
},
setup(props) {
const project = toRefs(props.project);
console.log(project);
const content = toRef(props, 'project');
const name = toRef(content.value, 'name');
const description = toRef(content.value, 'description');
const endProject = toRef(content.value, 'endProject');
const user = toRef(content.value, 'user');
const users = ref();
const route = useRoute();
const router = useRouter();
fetch(`http://localhost:8000/api/v1/users/selected_user`)
.then((data) => data.json())
.catch((error) => console.error(error))
.then((response) => {
users.value = response;
});
const editProject = () => {
if (
name.value === '' ||
description.value === '' ||
endProject.value === '' ||
user.value === ''
) {
console.log('error');
return;
}
fetch(`http://localhost:8000/api/v1/projects/${route.params.id}`, {
method: 'PUT',
body: JSON.stringify({
name: name.value,
description: description.value,
end_date: new Date(endProject.value.replace('-', '/')),
user: {
id_user: user.value,
},
}),
headers: {
'Content-Type': 'application/json',
},
});
router.push({
name: 'Project',
});
};
return {
name,
description,
endProject,
user,
users,
editProject,
};
},
};
</script>
This is the sample code to display the data by console:
const end_date = toRefs(props.project, 'end_date');
console.log(end_date);
What it shows me by console is the following:
created_at: ObjectRefImpl {_object: Proxy, _key: "created_at", __v_isRef: true}
description: ObjectRefImpl {_object: Proxy, _key: "description", __v_isRef: true}
end_date: ObjectRefImpl
__v_isRef: true
_key: "end_date"
_object: Proxy {id_project: 3, name: "gbhnju", description: "derftgyh", start_date: "2021-08-06T00:00:00Z", end_date: "2021-08-17T00:00:00Z", …}
value: "2021-08-17T00:00:00Z"
[[Prototype]]: Object
id_project: ObjectRefImpl {_object: Proxy, _key: "id_project", __v_isRef: true}
name: ObjectRefImpl {_object: Proxy, _key: "name", __v_isRef: true}
progress: ObjectRefImpl {_object: Proxy, _key: "progress", __v_isRef: true}
project_state: ObjectRefImpl {_object: Proxy, _key: "project_state", __v_isRef: true}
start_date: ObjectRefImpl {_object: Proxy, _key: "start_date", __v_isRef: true}
updated_at: ObjectRefImpl {_object: Proxy, _key: "updated_at", __v_isRef: true}
user: ObjectRefImpl {_object: Proxy, _key: "user", __v_isRef: true}
user_creation: ObjectRefImpl {_object: Proxy, _key: "user_creation", __v_isRef: true}
But when I want to show the value of the toRef by console it generates an undefined one, or if I update the page the obtejo is as if it were lost:
console.log(end_date.value);
This is what it shows me when I update the page:
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()