I'm not entirely sure what you're trying to achieve here. If you're trying to render each object inside types, displaying the name and then sending the type when clicked, you can do something like this.

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

<div id="app"></div>

<script>
  new Vue({
  methods: {
    getType(type) {
      //do whatever
      console.log(type)
    }
  },
    data: () => ({ data:[{
    name:"aaa",
    mail:"abc@gmail.com",
    types: [
            { name: '1', type: 'a' },
            { name: '2', type: 'b' },
            { name: '3', type: 'c' }   
        ]
    },
    {
    name:"bbb",
    mail:"def@gmail.com",
    types: [
            { name: '1', type: 'a' },
            { name: '2', type: 'b' },
            { name: '3', type: 'c' }   
        ]
    }] 
    }),
    template: `
    <table>
    <tr v-for="item in data">
    <td v-for="type in item.types" @click="getType(type.type)">
     {{type.name}}
    </td>
    </tr>
    </table>
    `
  }).$mount('#app');
</script>

<style>
td {
    cursor: pointer;
    padding: 5px 7px;
    border: 1px solid black;
    margin: 5px;
}
</style>

html:

<tr v-for="(data, index) in item.data" :key="index">
      <td class="text-center">
        {{ data.name }}
      </td>
      <td class="text-center">
        <v-btn icon @click="getTypes(data.types)"
          ><v-icon size="25">mdi-domain</v-icon></v-btn
        >
      </td>
    </tr>

script:

data() {
    return {
      item: {
        data: [
          {
            name: "aaa",
            mail: "abc@gmail.com",
            types: [
              { name: "1", type: "a" },
              { name: "2", type: "b" },
              { name: "3", type: "c" },
            ],
          },
          {
            name: "bbb",
            mail: "def@gmail.com",
            types: [
              { name: "1", type: "a" },
              { name: "2", type: "b" },
              { name: "3", type: "c" },
            ],
          },
        ],
      },
    };
  },
  methods: {
    getTypes(types) {
      let blankTypes = types.map((type) => type.type);
      console.log(blankTypes);
      // access types here
    },
  },

I think your data structure you proposed and your template don't match.

You are iterating item.data ... but there is no data property for each item in the array.

Additionally, in your data sampe you show data = [] .. but in your template you show data.name - the data array doesn't have a property name.

So assuming an array data = [] of items (each which has a types array), you need to iterate both the item in data AND the type in item.types and pass BOTH the item and the type to the handler function:

<tr v-for="(item, index) in data" :key="index">
      <td class="text-center">
        {{ item.name }}
      </td>
      <td class="text-center">
        <template v-for="type in item.types">
          <v-btn icon @click="getTypes(item, type)">
            <v-icon size="25">mdi-domain</v-icon></v-btn>
      </td>
    </tr>