Денис

При клике вызывайте метод своего компонента который будет помещать выбранный цвет в отдельную переменную selectedColor.
В шаблоне проверяйте совпадает ли color с selectedColor: v-if="color==selectedColor"

Конкретно для данного случая используйте Selection API. Можете получить Range, а от него getBoundingClientRect() и рассчитать позицию вашего попапа

<template>
<button 
  type="button" 
  @click="formatDoc('bold')" 
  :style="styles.fontBold ? 'font-weight': 'bold' : 'font-weight: 'regular'"
  :class="{ 'button--active': styles.fontBold }"
>
  <v-icon>mdi-format-bold</v-icon>
</button>
</template>

<script>
export default {
  data() {
    return {
      styles: {
        fontBold: false,
      }
    }
  },

  methods: {
    formatDoc(cmd, value = null) {
      if (value) {
      document.execCommand(cmd, false, value);  
      } else {
        document.execCommand(cmd);
        switch(cmd) {
          case 'bold':
            this.styles.fontBold = !this.styles.fontBold;
            break;
        }
      }
    }
  }
}
</script>