How to Accept Payments: Integrating Vue 2 - property 'post' of undefined

I am working through Stripe Payments "How to Accept Payments: Integrating Vue 2". I am using the latest version of Laravel (5.6) so I expected I would run into some issues. I looked at previous threads and replaced https with axios. When I submit the Stripe Checkout modal form I receive this error:

Console

CheckoutForm.vue:29 Uncaught TypeError: Cannot read property 'post' of undefined
    at TokenCallback.token [as fn] (CheckoutForm.vue:29)
    at TokenCallback.trigger (checkout.js:3)
    at TokenCallback.trigger (checkout.js:3)
    at IframeView.onToken (checkout.js:3)
    at IframeView.closed (checkout.js:3)
    at Object.closed (checkout.js:3)
    at RPC.processMessage (checkout.js:2)
    at RPC.processMessage (checkout.js:2)
    at RPC.message (checkout.js:2)
    at checkout.js:2

CheckoutForm.vue:

<template>
<form action="/purchase" method="POST">
  <input type="hidden" name="stripeToken" v-model="stripeToken">
  <input type="hidden" name="StripeEmail" v-model="stripeEmail">

  <button type="submit" @click.prevent="buy">Buy Box</button>
</form>
</template>

<script>
export default {
  mounted() {
    console.log('Component mounted.')
  },
  data() {
    return {
        stripeEmail: '',
        stripeToken: ''
    }
  },
  created() {
    this.stripe = StripeCheckout.configure({
      key: App.stripeKey,
      locale: 'auto',
      token: (token) => {
        this.stripeToken = token.id;
        this.stripeEmail = token.email;

        this.$axios.post('/purchase', this.$data)
        .then(response => alert('Complete'));
      },
    });
  },
  methods: {
    buy() {
      this.stripe.open({
        name: 'Gift Box',
        description: 'Gift box one month',
        amount: 2232,
        // shippingAddress: true,
        // billingAddress: true,
        currency: 'gbp',
      });
    }
  }
};
</script>

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

// Vue.component('example', require('./components/Example.vue'));
Vue.component('CheckoutForm', require('./components/CheckoutForm.vue'));

const app = new Vue({
    el: '#app'
});

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "eslint": "^4.18.1",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-html": "^4.0.2",
    "eslint-plugin-import": "^2.8.0",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "vue-resource": "^1.3.6",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "browser-sync": "^2.18.13",
    "browser-sync-webpack-plugin": "^1.2.0"
  }
}

Cheers!