vue 3 multiple v-models

App.vue

<template>
  <settings
    v-model:day="store.day"
    v-model:month="store.month"
    v-model:year="store.year"
  />
  <timeleft />
</template>

<script>
import settings from "./components/settings.vue";
import useAge from "./composables/store.js";
export default {
  name: "App",
  components: {
    settings,
    timeleft,
  },

  setup() {
    const store = useAge();

    return {
      store,
    };
  },
};
</script>

package.json

{
  "name": "tester",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "@vueuse/core": "^4.0.0-beta.40",
    "vue": "^3.0.2"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.8",
    "@vue/compiler-sfc": "^3.0.2"
  }
}

settings.vue

<template>
  <div class="select is-info">
    <select
      :value="day"
      @input="(event) => $emit('update:day', event.target.value)"
    >
      <option disabled value="">Day</option>
      <option v-for="day in range(1, 32)" :value="day" :key="day">
        {{ day }}
      </option>
    </select>
  </div>

  <div class="select is-info">
    <select
      :value="month"
      @input="(event) => $emit('update:month', event.target.value)"
    >
      <option disabled value="">Month</option>
      <option v-for="month in months" :value="month" :key="month">
        {{ month }}
      </option>
    </select>
  </div>

  <div class="select is-info">
    <select
      :value="year"
      @input="(event) => $emit('update:year', event.target.value)"
    >
      <option disabled value="">Year</option>
      <option
        v-for="year in range(1920, 2021).reverse()"
        :value="year"
        :key="year"
      >
        {{ year }}
      </option>
    </select>
  </div>

  <button class="button" :disabled="validateDate">save</button>
</template>

<script>
import { ref, computed } from "vue";

export default {
  emits: ["updateDate"],
  props: ["day", "month", "year"],
  setup(props, { emit }) {
    //Creates and maps list of months to array
    let months = Array.from(Array(12), (v, i) =>
      new Date(0, i).toLocaleString({}, { month: "long" })
    );

    //Range numbers
    let range = (start, end) =>
      [...Array(end - start)].map((_, i) => start + i);

    //Check if all daterefs are not empty strings;
    const validateDate = computed(() => {
      const dates = [props.day, props.month, props.year];
      const validate = dates.every((val, i, arr) => val != "" || undefined);
      return validate == true ? false : true;
    });

    return {
      range,
      months,
      validateDate,
    };
  },
};
</script>

<style>
</style>

store.js

import { useStorage } from "@vueuse/core";

const age = useStorage("age", {
  day: "",
  month: "",
  year: "",
});

function useAge() {
  return age;
}

export default useAge;