How to display elements of an array step by step on click inside v-for?

Question

JavaScript

Hello!
There is an array with data. By default, only the first element of the array should be visible.
Next, by clicking on the YES or NO button, you need to show the element whose id corresponds to yes_section or no_section (depending on which button we click)

For example, if in the Example 1 block we click on "no 4", then the Example 4 block appears below, and if we click on "yes 2", then the Example 2 block should appear below.

How can this be done? Thanks in advance everyone!

<div id="app">
<div 
  v-for="(step, id) in stepsData" 
  :key="step.id"
  class="step"
>
  <div class="legal-aid__step-question" v-html="step.name"></div>
    <button>YES {{ step.yes_section }}</button>
    <button>NO {{ step.no_section }}</button>
  </div>
</div>

new Vue({
  el: "#app",
  data:{
    stepsData: [
    	{
      	id: "1",
      	yes_section: "2",
      	no_section: "4",
        name: "Example 1"
      },
      {
      	id: "2",
      	yes_section: "5",
      	no_section: "3",
        name: "Example 2"
      },
      {
      	id: "3",
      	yes_section: "2",
      	no_section: "4",
        name: "Example 3"
      },
      {
      	id: "4",
      	yes_section: "2",
      	no_section: "4",
        name: "Example 4"
      },
      {
      	id: "5",
      	yes_section: "2",
      	no_section: "4",
        name: "Example 5"
      },
    ]
  }
});

Answer 1

One of the solutions
The solution is free, without registration and SMS