Vue.js filter table - vue.js

Question

I'm new in vue.js, I would like to filter the following table by "Director ID".
When I load the page I would like to show only rows where director ID is 18. I need the table to filter right away without any user input. I would like to "hardcode" the ID 18 in to the function.
Thank you for your help!
<template>
<div>
<div class="row">
<div class="col"><h1 class="mt-3">List of all Movies</h1></div>
</div>
<table class="table">
<thead>
<tr>
<th>Movie ID</th>
<th>Title</th>
<th>Release Year</th>
<th>Director ID</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="movie in movies" :key="movie.id">
<td>{{ movie.id }}</td>
<td>{{ movie.title }}</td>
<td>{{ movie.releaseYear }}</td>
<td>{{ movie.director.id }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data: function () {
return {
movies: [
{
id: 1,
title: "They All Lie",
releaseYear: 1989,
director: {
id: 18,
firstName: "Darci",
lastName: "Overill",
nationality: "China",
birthdate: "07/13/1973",
},
},
{
id: 2,
title: "Star Wars",
releaseYear: 1997,
director: {
id: 18,
firstName: "Darci",
lastName: "Overill",
nationality: "China",
birthdate: "07/13/1973",
},
},
{
id: 3,
title: "Mamma mia",
releaseYear: 2005,
director: {
id: 19,
firstName: "John",
lastName: "Smith",
nationality: "USA",
birthdate: "07/13/1980",
},
},
],
};
},
};
</script>

Answer 1

What if you change the tr to:
<tr v-for="movie in movies" :key="movie.id" v-if="movie.director.id === 18">
UPDATE
We wrote at the same time with #tuhin47.
I prefer his way to be honest with only a minor change in computed.
I changed the el to movie just to be more clear :)
computed: {
filteredMovies() {
return this.movies.filter((movie) => movie.director.id === 18);
},
},

Answer 2

You can use a computed property for filtering data and v-for the filtered data.
Here is the codesandbox
<tbody>
<tr v-for="movie in filteredMovies" :key="movie.id">
<td>{{ movie.id }}</td>
<td>{{ movie.title }}</td>
<td>{{ movie.releaseYear }}</td>
<td>{{ movie.director.id }}</td>
</tr>
</tbody>
Here is the computed property:
computed: {
filteredMovies() {
return this.movies.filter((el) => el.director.id === 18);
},
},