v-if directive not working at hte provide/inject logic vue

It seems like the v-if directive is not working at the provide/inject logic. I am trying to keep this project structure, but bot components are displayed at the same time, even though I'm using v-if for displaying a singular one. I suppose the component isn't reading my provided data from App.vue correctly, or what am I doing wrong?

https://codesandbox.io/s/boring-einstein-bhyfeu?file=/src/components/Step1.vue

<template v-if="activePhase == 1">  //this line is not working for each component
  <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="nextStep" class="btn">Next step</button>
    </div>
    <Button />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  components: {
    Button,
  },
  inject: ["activePhase", "firstName", "lastName"],
  data() {
    return {
      activePhase: this.activePhase,
      firstName: this.firstName,
      lastName: this.lastName,
    };
  },
  methods: {
    nextStep() {
      this.$emit("next");
      console.log(this.activePhase);
    },
  },
};
</script>

<style scoped>
.form-group {
  display: block;
}
</style>

Yes, you cannot use v-if on the outer template tag in an SFC, as it is part of the SFC's structure and not the actual template.

Try

<template>
  <div class="container" v-if="activePhase == 1">
     ...
  </div>
</template>