vue.js

gist.vue

'use strict';

var vm = new Vue({
  http: {
      root: '/root',
      headers: {
        Authorization: 'Basic base64:QuCk1yu18qZuV/LfzGLjsCwU1A8oJJPurdypCWBGLpk=',
      },
      options: {
        emulateJSON: true,
        emulateHTTP: true
      }
    },

  el: '#NoteController',

  data: {
    newNote: {
      id: '',
      name: '',
      description: ''
    },

    edit: false,

  },

  methods: {

    fetchNote: function () {
      this.$http.get('http://localhost:8000/api/notes').then((notes) => {
        this.$set('notes', notes.json())
      }, (notes) => {
        console.log(data)
      });
    },

    RemoveNote: function (id) {
      var ConfirmBox = confirm("Are you sure, you want to delete this Note?")

      this.fetchNote()

      if(ConfirmBox) this.$http.delete('http://localhost:8000/api/notes/' + id)
      // if(ConfirmBox) this.$http.delete('http://localhost:8000/api/notes/' + id)

      this.fetchNote()

      Materialize.toast('Note Deleted', 5000, 'red accent-4');
   
      this.fetchNote()
      

    },

    EditNote: function (id) {
      var note = this.newNote

      this.newNote = { id: '', name: '',description: ''}

      this.$http.put('http://localhost:8000/api/notes/' + id, note).then((data) => {
      // this.$http.put('http://localhost:8000/api/notes/', note).then((data) => {
        console.log(data)
      }, (data) => {
        console.log(data)
      });

      this.fetchNote()

      this.edit = false

      Materialize.toast('Note Updated', 5000, 'blue accent-4');

    },

    ShowNote: function (id) {
      this.edit = true

      this.$http.get('http://localhost:8000/api/notes/' + id).then(function(data){
      // this.$http.get('http://localhost:8000/api/notes?id=' + id).then(function(data){
        this.newNote.id = data.data.id
        this.newNote.name = data.data.name
        this.newNote.description = data.data.description
      },(data)=>{
        console.log(data);
      });
    },

    AddNewNote: function () {
      // User input
      var note = this.newNote

      // Clear form input
      this.newNote = { name:'', description:''}

      this.fetchNote()

      // Send post request
      this.$http.post('http://localhost:8000/api/notes/', note)

      this.fetchNote()

      Materialize.toast('Note Created', 5000, 'green accent-4');

      // Reload page
      this.fetchNote()

    }

  },

  computed: {
    validation: function () {
      return {
        name: !!this.newNote.name.trim(),
        description: !!this.newNote.description.trim()
      }
    },

    isValid: function () {
      var validation = this.validation
      return Object.keys(validation).every(function (key) {
        return validation[key]
      })
    }
  },

  ready: function () {
    this.fetchNote()
  }
});

@ryanda its not work

i have update the answer