Q:

Seleccionar solamente un Item de una lista de componentes hijos en Vue.js 2

Mi duda es la siguiente.
Tengo una lista de carpetas las cuales al hacer click sobre una de ellas esta se va a iluminar y va a mostrar su información. 
Todo bien hasta aquí, ahora el problema es que al seleccionar otra carpeta, la anterior va a seguir iluminada. A continuación el ejemplo:
https://jsfiddle.net/fjgonzalezs/vabx4Lnc/
¿Como puedo hacer para seleccionar solo una carpeta a la vez?
Edit
Ya logre hacerlo, agregué un array con los estados de las carpetas para poderlo cambiar desde el padre y no desde el hijo. 
https://jsfiddle.net/fjgonzalezs/o97zf6dw/
Aunque resuelvo el problema no se si será la mejor solución, no se si seria posible poner los estados dentro del array de carpetas en lugar de crear otro, pero al hacerlo no toma los cambios.

A:

No necesitas necesariamente mantener asociado una carpeta con su estado. Una opción más práctica sería enviar a todos los elementos el id del folder que ha pedido ser abierto (mediante $emit) y hacer una comprobación para saber si el folder actual es el abierto para poder actualizar su clase CSS.
Ejemplo
En cada folder, ponemos una condicional para ver cuando agregar la clase open (por ejemplo):
<li 
  class="folder"
  :class="{open: this.folder.id === open}"
  @click="openFolder"
>
</li>

Cuando se pulse sobre cada folder, se envía al padre el id de dicho folder:
openFolder() {
  this.$emit('open', this.folder.id);
}

Cada folder tendrá las propiedades folder y open. Este último representa el id del folder que ha pedido abrirse.
props: {
  open: {
    type: Number,
    required: true,
  },
  folder: {
    type: Object,
    required: true
  },
},

Y por último, el padre, al recibir notificación que un folder quiere abrirse, actualiza su propia propiedad folderOpen:
methods: {
  onFolderOpen(id) {
    this.folderOpen = id;
  }
},

la cual es pasada como propiedad a cada folder:
<ul class="folders">
  <folder
    v-if="ready"
    v-for="folder in folders"
    :folder="folder"
    :open="folderOpen"
    @open="onFolderOpen"
  />
</ul>

Código completo

Vue.component('folder', {
  template: `
    <li 
      class="folder"
      @click="openFolder"
    >
      <i
        class="material-icons"
        v-if="open !== folder.id"
      >
        folder
      </i>
      <i
        class="material-icons"
        v-if="open === folder.id"
      >
        folder_open
      </i>
      <label>{{ folder.name }}</label>
    </li>
  `,
  props: {
    open: {
      type: Number,
      required: true,
    },
    folder: {
      type: Object,
      required: true
    },
  },
  methods: {
    openFolder() {
      this.$emit('open', this.folder.id);
    }
  },
});

const app = new Vue({
  data: () => ({
    folders: [],
    folderOpen: -1,
    ready: false,
  }),
  methods: {
    onFolderOpen(id) {
      this.folderOpen = id;
    }
  },
  created() {
    this.folders = [{
        id: 0,
        name: 'Proyectos',
      },
      {
        id: 1,
        name: 'Trabajo',
      },
      {
        id: 2,
        name: 'Hacking',
      },
      {
        id: 3,
        name: 'StackOverflow'
      },
    ];
    this.ready = true;
  },
});

app.$mount('#app');
ul.folders {
  list-style: none;
}

ul.folders li {
  align-items: center;
  color: #555;
  cursor: pointer;
  display: flex;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  height: 40px;
}

ul.folders li i {
  margin: 0 10px 0 0;
  pointer-events: none;
}

ul.folders li label {
  font-weight: 600;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

<div id="app">
  <ul class="folders">
    <folder v-if="ready" v-for="folder in folders" :folder="folder" :open="folderOpen" @open="onFolderOpen" />
  </ul>
</div>

