useFunc.js

import { ref, computed, onMounted } from 'vue';
import { api } from '@/api/index.js';

export function useSetting(emit: any, name: string) {
  const loading = ref(false);
  const value = ref();

  const settingValue = computed({
    get: () => {
      loading.value = true;
      api.utils.getSettingValue(name).then((response) => {
        console.log(response.data.value);
        value.value = +response.data.value;
        loading.value = false;
      });
      return value;
    },
    set: (val) => {
      loading.value = true;
      console.log('set val: ', val);
      api.utils.setSettingValue(name, val).then((response) => {
        console.log(name, response.data.value);
        value.value = +response.data.value;
        loading.value = false;
      });      
    },
  });

  onMounted(() => {
    settingValue.value;
  });

  return { loading, settingValue, value };
}

// ---------
// component

const settingValue = websiteStatusSetting.settingValue;
let loading = ref(websiteStatusSetting.loading);

v-model="settingValue"