How to update in Vue3 component content based on reponse data? - asp.net

Question

Recently I've been working on filters in my service for booking hotel rooms in .NET + Vue3.
Backend method for filtering works fine, but I don't have clue how to force component to update its content using fetched data.
Im reciving data in format like this:
enter image description here
Here are my script and component files:
Filters component:
<template>
<div class="container">
<div class="d-flex align-items-center">
<label for="first_day" class="p-2">First day: </label>
<input type="date" name="first_day" v-model="filtersOptions.FirstDay" />
<label for="last_day" class="p-2">Last day: </label>
<input type="date" name="last_day" v-model="filtersOptions.LastDay"/>
<button type="submit" class="m-2 p-2" v-on:click="fetchFilteredRooms()">Search</button>
</div>
</div>
</template>
<script lang="ts">
import { useFilters } from '#/composables/useFilters';
export default {
setup(props: any, context: any) {
const { filtersOptions, fetchFilteredRooms } = useFilters();
return {
filtersOptions,
fetchFilteredRooms,
}
}
}
</script>
Filters script:
import { ref } from 'vue';
import Consts from "#/consts";
import { useRooms } from './useRooms';
class FiltersOptions {
FirstDay: any;
LastDay: any;
};
const { Rooms } = useRooms();
export const useFilters = () => {
const filtersOptions = ref<any>(new FiltersOptions());
async function fetchFilteredRooms() {
const filterRoomsAPI = Consts.API.concat(`rooms/search`)
const headers = {
'Content-type': 'application/json; charset=UTF-8',
'Access-Control-Allow-Methods': 'POST',
'Access-Control-Allow-Origin': `${filterRoomsAPI}`
}
fetch(filterRoomsAPI, {
method: 'POST',
mode: 'cors',
credentials: 'same-origin',
body: JSON.stringify(filtersOptions._value),
headers
})
.then(response => response.json())
.then((data) => (Rooms.value = data))
.catch(error => console.error(error));
}
return {
Rooms,
filtersOptions,
fetchFilteredRooms,
}
}
Rooms component:
import { ref } from 'vue';
import Consts from "#/consts";
import { useRooms } from './useRooms';
class FiltersOptions {
FirstDay: any;
LastDay: any;
};
const { Rooms } = useRooms();
export const useFilters = () => {
const filtersOptions = ref<any>(new FiltersOptions());
async function fetchFilteredRooms() {
const filterRoomsAPI = Consts.API.concat(`rooms/search`)
const headers = {
'Content-type': 'application/json; charset=UTF-8',
'Access-Control-Allow-Methods': 'POST',
'Access-Control-Allow-Origin': `${filterRoomsAPI}`
}
fetch(filterRoomsAPI, {
method: 'POST',
mode: 'cors',
credentials: 'same-origin',
body: JSON.stringify(filtersOptions._value),
headers
})
.then(response => response.json())
.then((data) => (Rooms.value = data))
.catch(error => console.error(error));
}
return {
Rooms,
filtersOptions,
fetchFilteredRooms,
}
}
Rooms script:
import { ref } from 'vue';
import Consts from "#/consts"
const headers = {
'Content-type': 'application/json; charset=UTF-8',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Origin': `${Consts.RoomsAPI}`
}
export function useRooms() {
const Rooms = ref([]);
async function fetchRooms() {
fetch(Consts.RoomsAPI, { headers })
.then(response => response.json())
.then((data) => (Rooms.value = data))
.catch(error => console.log(error));
}
return {
Rooms,
fetchRooms,
};
}
Any idea how to deal with it?