✨watch & v-model | Vue3 (Nuxt3)

vue file

<script setup>
const v = ref('')
const uris = reactive({
  encode: '',
  decode: ''
})

watch(v, () => {
  uris.encode = v.value ? encodeURI(v.value) : ''
  uris.decode = v.value ? decodeURI(v.value) : ''
})
</script>

<template>
        <div>
            <label for="uri">URI</label>
            <input v-model="v"  id="uri" placeholder="https://example.com">
            <small>Decode URI</small>
            <p>{{ uris.decode }}</p>
            <small>Encode URI</small>
            <p >{{ uris.encode }}</p>
        </div>
</template>

Sample

https://masanos.com/tools/encode/