VueJs Form Postback

form.html

<div id="upload-test">
    @if (TempData["UploadError"] != null)
    {
        <div class="error">
            @Html.Raw(TempData["UploadError"])
        </div>
    }

  <form action="/UploadFile/" enctype="multipart/form-data" method="post">
     <input type="file" id="myFile" name="file" required="required" @@change="onSelectFile()" ref="fileInput" />

     <input type="hidden" name="returnUrl" value="@HttpContext.Current.Request.Url.PathAndQuery" />
     <button type="submit" class="btn btn-primary" :disabled="hasInvalidFile">Upload</button>
  </form>
</div>

HandlerCSharp.cs

        [HttpPost]
        public ActionResult UploadFile(HttpPostedFileBase file, string returnUrl)
        {
            if (file == null)
            {
                TempData["UploadError"] = "File Error";
                return RedirectPermanent(returnUrl);
            }

            try
            {
                var path = Util.MapPath(filePath);
                file.SaveAs(path);
                
            }catch(Exception ex)
            {
                TempData["UploadError"] = ex.Message;
            }

            return RedirectPermanent(returnUrl);
        }

upload-test.js

var $myWidget = new Vue({
    el: '#upload-test',
    name: "UploadTest",
    data: {
        file: null
    },
    created: function () {

    },
    mounted: function () {
        var $that = this;

    },
    methods: {
        onSelectFile: function (e) {
            console.log(this.$refs.fileInput, e);
            this.file = this.$refs.fileInput.files[0].name;
        }
    },
    computed: {
        hasInvalidFile: function () {
            return (this.file == null) ? true : false;
        },
        extension: function () {
            if (this.file != null) {
                return '.' + this.file.split('.').pop();
            } else {
                return "";
            }
        }
    },
    watch: {

    }
});