Tracking Reactive ES6 Sets and Maps in Vue 3

import { reactive, computed } from 'vue';
 
export function useTagCollection() {
  const activeTags = reactive(new Set(['javascript', 'vue']));
  const metadata = reactive(new Map([['javascript', { level: 'intermediate' }]]));
 
  const addTag = (tag, meta) => {
    activeTags.add(tag);
    if (meta) metadata.set(tag, meta);
  };
 
  const removeTag = (tag) => {
    activeTags.delete(tag);
    metadata.delete(tag);
  };
 
  const tagList = computed(() => Array.from(activeTags));
 
  return { activeTags, metadata, addTag, removeTag, tagList };
}