How to access form variables in method of VueJS

Try this:

Vue.use(VeeValidate);

new Vue({
  el: "#app",
  data: {
    form: {
      duration: 7
    }
  },
  methods: {
      doSubmit() {
       var self = this;
       this.$validator.validateAll().then(function(result){
        if (!result){
            //this means a validation failed, so exit without doing anything
            console.log('did not work')
            return;
        }
        console.log('did work, duration is:')
        console.log(self.form)
       });
      }
    }
});

I think the issue here that your callback function inside .then has its own scope therefore its own 'this' is not the same as the 'this' in your component. It belongs to a different scope. You can preserve the component's scope by doing var self = this; outside your callback.

You can also use an arrow function (result) => { your callback logic.. } instead of your regular function in your 'then callback' and then 'this' inside will mean your component's 'this', since arrow functions does not have a separate internal scope.

like so with arrow function:

new Vue({
  el: "#app",
  data: {
    form: {
      duration: 7
    }
  },
  methods: {
      doSubmit() {
       this.$validator.validateAll().then((result) => {
        if (!result){
            //this means a validation failed, so exit without doing anything
            console.log('did not work')
            return;
        }
        console.log('did work, duration is:')
        console.log(this.form)
       });
      }
    }
});