vue2 vuetify 적용 시 데이터 조작 문의

안녕하세요 

강사님 강의를 보고 제가 따로 프로그램을 만들려고 하는데 css나 html하는게 귀찮아서 vue2에 vuetify를 적용하여 코딩중입니다.

아래 코딩을 실행했을 때 

TypeError: Cannot read property 'desserts' of undefined

이런 에러가 발생했습니다. data()함수 안의 변수를 사용하려면 this.변수명 해서 사용이 가능한 걸로 알고있는데 왜 사용할 수 없는걸까요??

<template>
  <v-card>
    <v-card-title @click="getData">
      {{ subMenuNm }}
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :search="search"
      v-for="(rowData, idx) in desserts"
      :key="idx"
    ></v-data-table>
  </v-card>
</template>

<script>
import axios from "axios";
export default {
  name: "User",
  props: {
    subMenuNm: String,
  },
  data() {
    return { 

      search: "",
      headers: [
        {
          text: "구분",
          align: "start",
          sortable: false,
          value: "name",
        },
        { text: "아이디", value: "userId" },
        { text: "닉네임", value: "nickname" },
        { text: "등급", value: "grade" },
        { text: "SMS 수신동의", value: "sms" },
        { text: "EMAIL 수신동의", value: "email" },
        { text: "휴대폰 번호", value: "phone" },
        { text: "계좌번호", value: "accountNum" },
        { text: "회원가입 일", value: "joinDate" },
        { text: "최근 접속정보", value: "accessInfo" },
      ],
      desserts: [
        {
          name: "Frozen Yogurt",
          userId: 159,
          nickname: 6.0,
          grade: 24,
          sms: 4.0,
          email: "1%",
          phone: "01012345678", 
          joinDate: "2021-06-15 12:57",
          accessInfo: "2021-07-21 14:56",
        },
      ],
    };
  },
  methods: { 
    getData() {
      var vm = this;
      axios
        .get("https://jsonplaceholder.typicode.com/users/")
        .then(function(response) {
          // console.log(response.data);
          vm.users = response.data;
          // console.log(vm.users);
          console.log(this.desserts);

          let loedData = {
            name: vm.users.name,
            userId: vm.users.id,
            nickname: vm.users.username,
            grade: vm.users.id,
            sms: vm.users.website,
            email: vm.users.email,
            phone: vm.users.phone, 
            joinDate: "2021-06-15 12:57",
            accessInfo: "2021-07-21 14:56",
          };

          this.desserts.unshife(loedData);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>