Vuetify v-slot:activator not stopping

Question

I have a text-field that's triggering a color-picker. This is inside a v-for loop as well. All is fine until the activator triggers the color-picker and multiple pickers are triggered with a mashup of the v-for data.

You can see the mashup of data at the top, as well as mutliple color pickers activated.

Any idea why? My code is below:

<v-tab-item>
  <v-card
    flat
    v-for="(colorMenu, index) in colorMenus"
    :key="index"
  >
    <v-card-text>
      <v-row 
        justify="start" 
        align="center">
        <v-col
          cols="4"
        >
        <p class="font-weight-bold text-subtitle-2 mt-4">{{ colorMenu.title }}</p>
        </v-col>
        <v-col
          cols="8"
        >
          <v-text-field 
            v-model="myModels[colorMenu.type]"
            v-mask="mask" 
            hide-details 
            class=""
            solo
          >
            <template 
              v-slot:append
            >
              <v-menu
                v-model="menu" 
                top 
                nudge-bottom="105" 
                nudge-left="16" 
                :close-on-content-click="false"
              >
                <template 
                  v-slot:activator="{ on }"
                >
                  <div
                    :style="{ backgroundColor: selectColors[index],  borderRadius: menu ? '50%' : '4px'}" 
                    v-on="on"
                    class="color_select"
                  />
                </template>
                    <v-color-picker
                      v-model="selectColors[index]" 
                      flat
                    >
                    </v-color-picker>
              </v-menu>
            </template>
          </v-text-field>
        </v-col>
      </v-row>
      <v-divider class="mt-3"></v-divider>
    </v-card-text>
  </v-card>
</v-tab-item>