Сортировка постов

Наблюдаемые свойства
WATCH

функция срабатывает в тот момент когда какая то модель была изменена.
Мы изменили значение счётчика и функция, которая за этим счётчиком наблюдает, выполняется. В данном случае мы можем наблюдать за моделью SelectSort и когда она изменяется мы можем делать сортировку.

функция наблюдатель должна иметь такое же название как и модель которое объявлено в компоненте. В нашем случае есть модель SelectedSort и поэтому мы создаём одноимённую функцию. Параметром функция принимает новое значение (т.е. на то что была изменена модель). Функция отрабатывает в тот момент, когда меняется модель SelectedSort.

Соответственно мы можем делать какую то логику внутри функции такого наблюдателя. SelectedSort является примитивом т.е. строка

при открытии модального окна newValue получает true а при закрытии false
watch:{
dialogVisible(newValue){
}
}

src\App

<template>
<div class="app">
<h1>Страница с постами</h1>

<div class="app_btns">
<my-button
 @click="showDialog"
 style="margin: 15px 0;" кнопка не должна прилипать к заголовку
>Создать пост</my-button>

<my-select 
 v-model="selectedSort"
 :options="sortOptions"
/>
</div>

<my-dialog v-model:show="dialogVisible">
<post-form
@create="createPost"
/>
</my-dialog>

<post-list 
:posts="posts"
@remove="removePost"
v-if="!isPostsLoading"
/>
<div v-else>Идет загрузка...</div>
<div>
</template>

<script>
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
import axios from "axios";
export default{
components:{
 PostList,PostForm,
}
data(){
return {
 posts:[],
 dialogVisible:false, 
 isPostsLoading:false,
 selectedSort:'',
 sortOptions:[
  {value:'title',name:'По названию'},
  {value:'body',name:'По описанию'},
 ],
}
}
methods:{
 createPost(post,second,third){
  this.posts.push(post);
  this.dialogVisible = false;
 }
 removePost(post) {
  this.posts = this.posts.filter(p => p.id !== post.id)
 },
 showDialog(){
  this.dialogVisible = true;
 },
 async fetchPosts(){
  try{
   this.isPostsLoading = true;
   setTimeout(async()=> {
   const response = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
   this.posts = responce.data;
   this.isPostsLoading = false;
},1000)
  } catch(e){
   alert('ошибка')
  }
 }
},
 mounted(){
  this.fetchPosts();
 },
 watch: {
  selectedSort(newValue){
  }
 }
}
</script>

<style>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.app{
 padding: 20px;
}
.app_btns{
 margin:15px 0;
 display: flex;
 justify-content:space-between; 
}
</style>

Глубокое отслеживание объекта

watch: {
 post:{
  handler(newVal){
   console.log(newVal);
  }
 },
 deep: true
}