JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <div
    v-for="n in dropdowns"
    class="dropdown-checkbox"
  >
    <label @click="opened = opened === n ? null : n">
      SELECT
    </label>
    <ul :class="{ opened: opened === n }">
      <li v-for="item in n.items">
        <label>
          <input type="checkbox" :value="item" v-model="n.selected">
          {{ item }}
        </label>
      </li>
    </ul>
  </div>
  <div>SELECTED:</div>
  <pre>{{ selected }}</pre>
</div>

CSS

.dropdown-checkbox {
  position: relative;
  display: inline-block;
  border: 1px solid silver;
  margin: 10px;
}

.dropdown-checkbox > label {
  display: inline-block;
  padding: 10px;
}

.dropdown-checkbox ul {
  position: absolute;
  display: none;
  border: 1px solid silver;
  padding: 0;
  list-style: none;
  background: #fff;
}

.dropdown-checkbox ul li label {
  display: inline-block;
  background: #ddd;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}

.dropdown-checkbox ul.opened {
  display: block;
}

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    opened: null,
    dropdowns: [
      {
        selected: [],
        items: [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
      },
      {
        selected: [],
        items: [ '69', '187', '666' ],
      },
      {
        selected: [],
        items: [ '~!@#$%', '^&*()', '<>?:|' ],
      },
    ],
  }),
  computed: {
    selected() {
      return this.dropdowns.map(n => n.selected);
    },
  },
});