Vue.js: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "flow", "typescript"

Question

I have been working in a vue.js project, mainly using javascript. I added a modal window library that uses typescript. I changed the Language Features for TypeScript and JavaScript files in VSCode, but I still receive this error

"Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "flow", "typescript"."

This is the code from that component.

<script lang="ts">
import { defineComponent, PropType } from "vue";

export interface UserProfile {
  username: string;
  email: string;
  private: boolean;
}

export default defineComponent({
  name: "EditProfileComponent",
  emits: ["onUpdate"],
  data() {
    return {
      startdate: "",
      email: "",
      private: false,
    };
  },
  created() {
    this.startdate = this.startDate;
    this.username = this.userName;
    this.private = this.privateAccount;

    //this.$refs.modalAppointmentStartTime.innerHTML=this.$parent.$data.selectedInitialDate;
  },
  methods: {
    close() {
      this.$vbsModal.close();
    },
    reserveAppointment(){
      console.log("Reserve done");
    }
  },
  mounted(){
    console.log(this.$parent.$data.selectedInitialDate);
  },
  props: {
    startDate: {
      type: String as PropType<string>,
      default: "",
    },

  },
});
</script>

How do I solve this issue?

I changed the Language Features for TypeScript and JavaScript files in VSCode, but I still receive this error.