//Modal.vue

<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="290">
      <template v-slot:activator="{ on }">
        <v-btn class="modal-btn" color="primary" dark v-on="on">Open Dialog</v-btn>
      </template>
      <v-card>
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="dialog = false">Disagree</v-btn>
          <v-btn color="green darken-1" flat @click="dialog = false">Agree</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false
      }
    }
  }
</script>

<style>
</style>

//Body.vue

<template>
  <div class="body">
    <full-page :options="options" id="fullpage">
        <div class="section">
            <Modal></Modal>
        </div>
        <div class="section">
            <h3>Section 2</h3>
        </div>
        <div class="section">
            <h3>Section 3</h3>
        </div>
    </full-page>

  </div>
</template>

<script>
import Modal from './Modal'
export default {
  name: 'Body',
  Components: {
    Modal
  },
  data () {
    return {
      options: {
        afterLoad: this.afterLoad,
        scrollOverflow: true,
        scrollBar: false,
        menu: '#menu',
        navigation: true,
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#fec401', '#1bcee6', '#ee1a59']
      },
      logo: { width: 500 },
      dialog: false
    }
  }
}
</script>

<style>
  .jumbotron {
    margin:  0 200px;
  }

  button {
    margin: 5px;
    border-radius: 10px;
  }

  .modal-text-container p {
    text-align: left;
  }
</style>