**I'm trying to implement the provide/inject logic in Vue. In my 'App.vue' component, I have defined the 'firstName' input as a string "John", and I want to display this value when the child component 'Step1' is created. However, currently the input is empty. How can I populate the input with the string 'John'?
https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Step1.vue**
<template >
<div class="container">
<div class="content-wrapper">
<h1>Step 1</h1>
<div class="form-group">
<label>First Name</label
><input
name="name"
v-model="firstName"
placeholder="Your first name"
class="form-control"
required
/>
</div>
<div class="form-group">
<label>Last Name</label
><input
name="lastname"
v-model="lastName"
placeholder="Your last name"
class="form-control"
required
/>
</div>
<button type="button" @click.prevent="nextStep" class="btn">
Next step
</button>
</div>
<Button firstName="firstName" lastName="lastName" />
</div>
</template>
<script>
import Button from "./Button.vue";
export default {
inject: ["firstName", "lastName"],
data() {
return {
firstName: this.firstName,
lastName: this.lastName,
};
},
created() {
// Do I need to write something here?
},
components: {
Button,
},
methods: {
nextStep() {
this.$emit("next");
},
},
};
</script>