How to hide one component and show another in vuejs if they are the same?

Question

Vue.js

Hello.
I have several identical components on the page:

<div>
<button @click="showPicker = !showPicker">Button 1</button>  // По нажатию на эту кнопку должен открыться
<sketch-picker v-model="h1Color" v-if="showPicker" /> // этот компонент
</div>
<div>
<button @click="showPicker = !showPicker">Button 2</button> // А по нажатию на эту кнопку должен открыться
<sketch-picker v-model="h2Color" v-if="showPicker" /> // этот компонент
</div>
// но по нажатию на любую из кнопок открываются оба компонента и так же закрываются.

<script>
new Vue({
  el: '#app',
  components: {
    'sketch-picker': sketch,
  },
  data() {
    return {
      showPicker: false,
      h1Color: '#555555',
      h2Color: '#555555',
    }
  }
});
</script>

Is it possible somehow to show only the component to which the button belongs. At the same time without adding new properties
Thank you.

Answer 1

The simplest thing is to make a showPicker property for each,
that is, showPicker1 changes on the first button and displays 1
showPicker2 element - similarly with the second