Un exemple de code

avant d'aller plus loin (promis c'est le seul)

<template>
  <div class="zone">
    <div class="zone-head">
      <span class="zone-title">{{ zone.name }}</span>
      <a class="zone-help" @click.prevent="addPostit" title="Tip: Double click to create a new postit">
        <svg width="10" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill="#000" fill-rule="nonzero" d="M50 0h-20v30h-30v20h30v30h20v-30h30v-20h-30z"/></svg>
      </a>
    </div>
    <div class="zone-body" @dblclick="addPostit">
      <draggable class="draggable" :list="zone.postits" :options="{group:'zone', handle: '.move', onEnd: 'checkPostitsArray'}">
        <postit v-for="postit in zone.postits" :key="postit.id" :postitObj="postit" @set-last-color="setLastUsedColor" @delete-postit="deletePostIt" @add-postit="addPostit"></postit>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Postit from 'components/Postit';
import md5 from 'md5';

export default {
  name: 'zone',
  components:{
    'postit': Postit,
    draggable
  },
  props: ['zone'],
  data(){
    return{
      lastUsedColor: 'yellow'
    }
  },
  methods: {
    addPostit(event, force = false){
      this.$nextTick(() => {
      })
    },

    deletePostIt(postit){
    },

    setLastUsedColor(color){
      this.lastUsedColor = color;
    },

    checkPostitsArray: function(){
      if (!this.zone.hasOwnProperty('postits')) {
        this.$set(this.zone, 'postits', []);
      }
    }
  },
  beforeMount() {
    this.checkPostitsArray()
  },
  beforeUpdate() {    
    this.checkPostitsArray()
  }
}
</script>


<style lang="scss" scoped>
  .zone{
    display: flex;
    flex-direction: column;
    user-select: none;
    flex-grow: 1;
  }
  

  .zone-head{
    display: flex;
    padding: .5rem;
    align-items: center;
    background-color: rgba(0,0,0,.05);
    
    span{
      display: inline-block;
      height: 20px;
      vertical-align: middle;
      font-weight: bold;
    }

    svg{
      height: auto;
      width: 14px;
    }
  }

  .zone-body{
    flex-grow: 1;
    background-color: #FFF;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
  }
</style>

Un composant/view est toujours le reflet d'un état à un instant T

Concept de base des composants

Problème

Dès que l'application devient un peu plus complexe que un ou deux composants, il devient difficile de synchroniser l'état des composants entre eux.

Solution