Failed to mount component: template or render function not defined using vue.js

I’m learning vue. js .I’m trying to make simple form by using vue.js but I got above error while making a form. I tried but unable to fix the problem. Please help me.

<div id="app"> 
        <form name="form" @submit.prevent="handleLogin">
                     <input
              v-model="fiscal_year"
              v-validate="'required'"
              type="text"
              class="form-control"
              name="fiscal_year"
            />
                 <button class="btn btn-primary btn-block" :disabled="loading">
              <span v-show="loading" class="spinner-border spinner-border-sm"></span>
              <span>Submit</span>
            </button>
               </form>

<script>
var app = new Vue({
  el: '#app',

  data: {
    fiscal_year: 2000,
    loading: false,
  },
  mount:function(){},
  methods: {
    handleLogin(){

        console.log('handle login');
      this.loading = true;
    }

  }
})
</script>

Answer

UPDATE

If you are using cli-vue : https://cli.vuejs.org/

Assume you put file in App.vue :

<template>
  <div id="app">
    <h1>hello</h1>
    <form name="form" @submit.prevent="handleLogin">
      <input v-model="fiscal_year" type="text" class="form-control" name="fiscal_year">
      <button class="btn btn-primary btn-block" :disabled="loading">
        <span v-show="loading" class="spinner-border spinner-border-sm"></span>
        <span>Submit</span>
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fiscal_year: 2000,
      loading: false
    };
  },
  methods: {
    handleLogin() {
      console.log("handle login");
      this.loading = true;
    }
  }
};
</script>

Dont use jquery in Vue project. If you want to use bootstrap you can use bootsrap-vue : https://bootstrap-vue.js.org/

But if you are using vue in html use this : https://v2.vuejs.org/v2/guide/

— Previous —

First, have you read vuejs introduction in https://v2.vuejs.org/v2/guide/ and Vue Lesson on Scrimba ?

About the question. <template> are used in component. You can replace it to <div id="app"> :

<div id="app"> <!-- Replace <template> with <div> -->
    <div class="col-md-12">  
        <form name="form" @submit.prevent="handleLogin">
          <div class="form-group col-md-6">
            <label for="fiscal_year">Fiscal Year</label>
            <input
              v-model="fiscal_year"
              v-validate="'required'"
              type="text"
              class="form-control"
              name="fiscal_year"
            />
          </div> 

          <div class="form-group">
            <button class="btn btn-primary btn-block" :disabled="loading">
              <span v-show="loading" class="spinner-border spinner-border-sm"></span>
              <span>Submit</span>
            </button>
          </div>

        </form>
      </div>
</div>

Then you create vue instance in the <script> tag :

var app = new Vue({
  el: '#app',
  
  data: {
    fiscal_year: 2000,
    loading: false,
  },
  methods: {
    handleLogin(){
        console.log('handle login');
      this.loading = true;
    }
  }