Components not rendered

Question

I wonder why the Components are not rendered. While the console isn't showing any of the typical errors.

https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Form.vue**

<template>
  <form>
    <KeepAlive>
      <component :is="currentStep" />
    </KeepAlive>
  </form>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["currentStep"],
  methods: {},
};
</script>

Answer 1

You should pass currentStep as a prop in your <Form /> component and instead of method use computed property to pass the component name dynamically.

computed: {
    currentStep() {
      return this.steps[this.stepIndex];
    },
  }

Live Demo : codesandbox