What is the correct way to process JSON array (or object) from Axios?

Question

Vue.js

Beginner - I stupidly take the code from the examples. Please explain on your fingers)))
Errors:
"TypeError: e.Deadlines is not a constructor"
"TypeError: Cannot read property e.Deadlines of null"
Toly I don't understand the scope of variables
Toly I don't understand Life cycle diagram

How I imagine it :
I take MainData from Axios. I cut off the empty date. I add a filter through radio for dates.
Errors started with a filter for an empty date. In computed refused to work. Well - put the filter in Axios - it works. Further worse.
Loading component:
Component renders two entries correctly - throws out an empty entry, but...
Response in console: null and "mounted". MainData = null. Whoops...
I press the button radio = "TypeError: e.Deadlines is not a constructor". In the console - undefined
Again I press the radio button = the console finally displays the array.
Something I do not understand with visibility and initialization...

And suspicion that in general incorrectly wrote FilterMainData. In template I need to change MainData. If I write "value in FilterMainData" in the template, then the list does not display. So hit me here too. )))

There is a template

<template>
  <div class="News">
    <input type="radio" id="All" value="All" v-model="picked">
    <label for="All">Все</label>
    <input type="radio" id="Active" value="Active" v-model="picked">
    <label for="Active">Активные</label> {{picked}}
    <article v-for="value in MainData" v-bind:key="value.id">
    <ul>
      <template v-if="value.Deadlines"> // это лишнее. но для теста нужна была
        <li><div>Сроки</div></li>
        <li><div>{{value.Deadlines}}</div></li>
      </template>
    </ul>
    </article>
  </div>
</template>

Is there a script

<script>
import axios from 'axios';
export default {
  name: 'List',
  data() {
    return {
      MainData: null,
      picked: "All"
    }
  },
  mounted: function(){
    axios
      .get('http://localhost:8080/static/MainData.json')
      .then(response=>(this.MainData=response.data.filter(function(e){
        return e.Deadlines.length >0;
      })
      ))
      .catch(error=>console.log(error)); // Надеюсь тут MainData уже определена?
      this.FilterMainData();
      console.log("mounted");
  },
  methods: {
    FilterMainData: function(){ // тут как то надо MainData возвращать 
      if(this.picked != "All"){
        console.log(this.MainData.Deadlines);  //ошибка
        return this.MainData.filter(function(e){
          var NowDate = new Date();
          var EndDate = new (e.Deadlines); // Вот тут ЗАСТРЯЛ
          console.log("FilterMainData");
          return EndDate-NowDate > 0
        });
      }else{
        console.log(this.MainData);
        return this.MainData //ошибка MainData = null.
      }
    }
  },
  watch: {
    picked: function(){
      return this.FilterMainData(); 
    }
  }
}
</script>

There is MainData

[
{"id":1, "Deadlines":  ""},
{"id":2, "Deadlines":  "28.10.2020 "},
{"id":2, "Deadlines":  "08.05.2020 "}
]