How to upload image in vue.js?

I am trying to make a small website(CRUD operation) which will take a text and a image,after clicking the add button the data are updated in table but the image in not showing, in api response also image path is coming empty. I am fetching the api and using a json file for response. All images are stored in images folder. I can't find any solution , please help me. the UI is:The UI image is

CreateCountry.vue

<template>
  <form @submit.prevent="submit" enctype="multipart/form-data">
    <label>Name</label>
    <input type="text" name="title" v-model="name" placeholder="Enter Name" />
    <label>Flag</label>
    <input type="file" ref="flag" @change="selectFile()" />
    <button>Add</button
    ><router-link :to="{ name: 'Countries' }" class="btn">Cancel</router-link>
  </form>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "CreateCountry",
  data() {
    return {
      flag: "",
    };
  },
  methods: {
    selectFile() {
      this.file = this.$refs.flag.files[0];
    },
  },
  setup() {
    const name = ref("");
    const flag = ref("");
    const router = useRouter();
    const submit = async () => {
      await fetch("http://localhost:3000/countries", {
        method: "POST",
        headers: { "Content-type": "application/json" },
        body: JSON.stringify({
          name: name.value,
          flag: flag.value,
        }),
      });
      await router.push("/admin/countries");
    };

    return { name, flag, submit };
  },
};
</script>

<style></style>

Countries.vue

<template>
<router-link :to="{ name: 'CreateCountry'}" class="btn">Add Country</router-link>
 <select class="select" v-model="selected">
    <option v-for="country in countries" :value="country" :key="country.id">
      {{ country.name }}
    </option>
  </select>
<table>
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Image</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="country in countries" :key="country.id">
        <td>{{country.id}}</td>
        <td>{{country.name}}</td>
        <td><img :src="country.flag" :alt="country.name" width="90" /></td>
        <td>
          <button @click="del(country.id)" class="btn btn-del text-center">Delete</button>          
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import {onMounted, ref} from 'vue';
export default {
  name: "Countries",
   setup() {
    const countries = ref([]);
    onMounted( async () => {
      const res = await fetch('http://localhost:3000/countries');
      countries.value = await res.json();
    })
    const del = async (id) => {
      await fetch(`http://localhost:3000/countries/${id}`, {
        method: 'DELETE'
      })
      countries.value = countries.value.filter(p => p.id !== id);
    }
    return { countries,del }
  }
};
</script>

<style></style>

db.json

{
  "countries": [
    {
      "name": "Australia",
      "continent": "Oceania",
      "flag": "images/australia.png",
      "id": 4
    },
    {
      "name": "England",
      "continent": "Europe",
      "flag": "images/australia.png",
      "id": 5
    },
    {
      "name": "Namibia",
      "continent": "Africa",
      "flag": "images/namibia.png",
      "id": 8
    },
    {
      "name": "New Zealand",
      "continent": "Oceania",
      "flag": "images/newzealand.png",
      "id": 3
    },
    {
      "name": "Zimbabwe",
      "continent": "Africa",
      "flag": "images/zimbabwe.png",
      "id": 7
    },
    {
      "name": "South Africa",
      "continent": "Africa",
      "flag": "images/jpeg_43.jpg",
      "id": 2
    },
    {
      "name": "India",
      "continent": "Asia",
      "flag": "images/india.png",
      "id": 1
    },
  ]
}