What causes errors when inserting any js code into vue?

Question

Vue.js

Almost any code produces errors, even working ones.
Can you please explain what is causing the error?
File structure:

<template>
  <v-container>
<span class="my_area"></span><br />
<input type="button" class="my_button" value="Кликни на меня" />
  </v-container>
</template>

<script>

export default {
  mounted() {
$(function()
{
   $('.my_button').click(function()
   {
     $('.my_area').css({width:100}).animate({width:'+=100'});
   });
});
}}
</script>

<style scoped>
.my_area
{
   display: block;
   width: 100px;
   height: 100px;
   border: #d17662 1px solid;
   background: #b8523c;
}
</style>

Errors:

Failed to compile.

./src/components/Contacts.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: '$' is not defined (no-undef) at src\components\Contacts.vue:14:1:
  12 |   mounted() {
  13 | 
> 14 | $(function()
     | ^
  15 | {
  16 |    $('.my_button').click(function()
  17 |    {


error: '$' is not defined (no-undef) at src\components\Contacts.vue:16:4:
  14 | $(function()
  15 | {
> 16 |    $('.my_button').click(function()
     |    ^
  17 |    {
  18 |      $('.my_area').css({width:100}).animate({width:'+=100'});
  19 |    });


error: '$' is not defined (no-undef) at src\components\Contacts.vue:18:6:
  16 |    $('.my_button').click(function()
  17 |    {
> 18 |      $('.my_area').css({width:100}).animate({width:'+=100'});
     |      ^
  19 |    });
  20 | });

Answer 1

1. this is not pure JS, but jQuery, jQuery is not connected, so it swears
2. you don’t need all this code in Vue at all, use the standard Vue events ( https://vuejs.org/v2/guide/events.html)