[Vuejs]-How to use template inside a form in vue js

You can emit an event from the child. The parent needs to listen for the custom event and get the data from there. You also need to listen for onChange on your select to emit the event.

The template for categories should be something like this

var categorySelect = Vue.component('category-select',
{
    data()
    {
        return {
            options:[],
            cat:""
        }
    },
    template:'<select class="form-control form-control-sm" v-model="cat" @change="handleUpdateSelectedValue($event)">' +
        '       <option v-for="option in options" v-bind:value="option.id">{{option.name}}</option></select>',
    methods: {
     handleUpdateSelectedValue(event) {
       this.$emit('selectedValue', event.target.value) //emitting the event here
     }
    }
    created :function()
    {
        var templateObject = this;
        var parameters =
                {

                    "url":"getCategories",
                    "type":"GET",
                    "async":true,
                    "data_type":"JSON",
                    "callback":function(data)
                    {
                        templateObject.options = data;
                    }
                }
            sendDataToSErver(parameters);
    }
});

And now you need to listen for the event in the parent

<div class="col-3">
  <div class="form-group">
    <label for="category" class="sr-only">Category</label>
    <category-select @selectedValue="handleSelectedValue"></category-select>
  </div>
</div>

Now, the only thing that remains to do is to define handleSelectedValue in your parent component and do something with that value.

var formObject =  new Vue({
 el: '#amount_form',
 data: {
    logdate: '',
    amount:'',
    description:''
 },
 methods: {
  handleSelectedValue(value) {
  }
 }
 ...