Having an issue with Vuejs 3 composables where I am trying to create a single composable for three inputs - email type and text type. I'm unable to display the email typed in the button component template even though I have imported the composable hook js file in the same way as for the input components. I am struggling to figure out how to display the input data and also how to send the collected input data to the parent component for form submission, as I am using the composable component itself. Any help would be appreciated.
useInputComposable
import { ref } from 'vue'
export function useInput() {
const input = ref('')
let passed = ref('')
function updateInput(newInput) {
input.value = newInput
}
return [ input, updateInput ]
}
Parent component
<template>
<TextInput />
<TextInput />
<EmailInput />
<Buttoncomponent />
</template>
Text type input
<script setup>
import { useInput } from '@/composables/useInput.js'
const [input, updateInput] = useInput()
</script>
<template>
<div>
<label for="input">{{ input }}</label>
<input
id="input"
type="text"
:value="input"
@input="updateInput($event.target.value)"
/>
</div>
</template>
Email type input
<script setup>
import { useInput } from '@/composables/useInput.js'
const [input, updateInput] = useInput()
</script>
<template>
<div class="input">
<input
id="input"
type="email"
:value="input"
@input="updateEmailInput($event.target.value)"
/>
</div>
</template>
Button component
<script setup>
import { useInput } from '@/composables/useInput.js'
const [ input ] = useInput()
</script>
<template>
<button>{{ input }} place the email here</button> <!-- the input is empty here ('') -->
</template>