...
                 <file></file>
...
</template>

<script>
    import File from '../../../_partials/File';

    export default {
        components: {
            File,
        },
...

<template>
	<div>
		<div style="display: none;">
			<label>Files
				<input type="file" id="files" ref="files" multiple v-on:change="handleFilesUpload()" />
			</label>
		</div>
		<div v-for="(file, index) in files">
			<span>{{file.name}}</span>
			<span>{{file.size}} </span>
			<button type="button" @click="deleteItem(index)" class="close" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div>
			<span class="send-mess-file-pic"></span>
			<span class="send-mess-file-label" @click="addItem()">Прикрепить файл</span>
			<span class="send-mess-file-label-max" v-if="fileIsMoreThen2Mb">Файл не должен быть больше 2 мб</span>
		</div>
	</div>
</template>

<script>
  export default {
      methods: {
          addItem() {
              if (this.files.length < 5) {
                  this.$refs.files.click();
              }
              this.fileIsMoreThen2Mb = false;
          },
          handleFilesUpload() {
              let uploadedFiles = this.$refs.files.files;

              for (var i = 0; i < uploadedFiles.length; i++) {
                  var ob = uploadedFiles[i];
                  if (ob.size > (1000 * 1000 * 2)) {
                      this.fileIsMoreThen2Mb = true;
                      return;
                  }
                  let fileName , fileSize;
                  if (ob.name.length > 20) {
                      fileName = ob.name.substr(0, 10) + "..." + ob.name.substr(ob.name.length - 10, ob.name.length);
                  } else {
                      fileName = ob.name;
                  }
                  if (ob.size <= 1000)
                      fileSize = (ob.size).toFixed(1) + " байт";
                  else if (ob.size > 1000 && ob.size < 1000 * 1000)
                      fileSize = (ob.size / 1000).toFixed(1) + " кб";
                  else
                      fileSize = (ob.size / (1000 * 1000)).toFixed(1) + " мб";

                  this.files.push({
                      "name": fileName,
                      "size": fileSize,
                  });
              }
          },
          deleteItem: function(event) {
              this.files.splice(this.files.indexOf(event), 1);
          },

          isNumeric: function(n) {
              return !isNaN(parseFloat(n)) && isFinite(n);
          },

          validateForm: function(event) {
              this.attemptSubmit = true;
              if (this.missingType || this.missingTema)
                  event.preventDefault();
              event.preventDefault();
          },
      },
      computed: {
          missingType: function() { return this.type === ''; },
          missingTema: function() { return this.tema === ''; },
          missingTema2: function() {
              return (
                  this.isNumeric(this.number) === false ||
                  this.number < 1 ||
                  this.number > 10
              )
          },
      },
      data() {
          return {
              files: [],
              fileIsMoreThen2Mb: false,
              type: '',
              tema: '',
              attemptSubmit: false,
          }
      },
  };
</script>


<style>
	.send-mess-file-label{
		padding-bottom: 4px;
		color: red;
		border-bottom: 1px dashed;
		font-size:10px;
	}
	.send-mess-file-pic{
		background:url(/feedback/img/file_pic.png) no-repeat top left;
		display: inline-block;
		height: 20px;
		width: 20px;
	}
</style>