This worked perfect, have used in one of my projects now.

Thanks a lot.

I actually fixed this back then, sorry i did not posted here let me post now so it may help someone need this.

<template>
  <div>
    <q-file
      :value="files"
      @input="updateFiles"
      :label="label"
      outlined
      multiple
      :clearable="!isUploading"
    >
      <template v-slot:file="{ index, file }">
        <q-chip
          class="full-width q-my-xs"
          :removable="isUploading && uploadProgress[index].percent < 1"
          square
          @remove="cancelFile(index)"
        >
          <q-linear-progress
            class="absolute-full full-height"
            :value="uploadProgress[index].percent"
            :color="uploadProgress[index].color"
            track-color="grey-2"
          />

          <q-avatar>
            <q-icon :name="uploadProgress[index].icon" />
          </q-avatar>

          <div class="ellipsis relative-position">
            {{ file.name }}
          </div>

          <q-tooltip>
            {{ file.name }}
          </q-tooltip>
        </q-chip>
      </template>

      <template v-slot:after v-if="canUpload">
        <q-btn
          color="primary"
          dense
          icon="cloud_upload"
          round
          @click="upload"
          :disable="!canUpload"
          :loading="isUploading"
        />
      </template>
    </q-file>
  </div>
  <!--
    <div class="col-4 q-pa-sm">
      <q-uploader
        url="http://localhost:30035/uploads"
        label="Upload files"
        color="purple"
        square
        flat
        bordered
      />
    </div>
  </div>
  -->
</template>

<script>
import api from "@/api";
import axios from "axios";

export default {
  name: "Uploader",
  props: {
    type: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      files: null,
      uploadProgress: [],
      uploading: null
    };
  },
  computed: {
    label() {
      return "Upload your " + this.type;
    },
    isUploading() {
      return this.uploading !== null;
    },

    canUpload() {
      return this.files !== null;
    }
  },

  methods: {
    cancelFile(index) {
      this.uploadProgress[index] = {
        ...this.uploadProgress[index],
        error: true,
        color: "orange-2"
      };
    },

    async updateFiles(files) {
      this.files = files;

      if (this.files.length) {
        let objFile = this.files[0];
        if (this.type == "Video") {
          if (objFile.type.indexOf("video/") !== 0) {
            this.$q.notify({
              color: "red-5",
              textColor: "white",
              icon: "warning",
              message: "Please select a valid VIDEO to upload."
            });

            return false;
            event.preventDefault();
          }
        } else {
          if (objFile.type.indexOf("image/") !== 0) {
            this.$q.notify({
              color: "red-5",
              textColor: "white",
              icon: "warning",
              message: "Please select a valid IMAGE to upload."
            });
            return false;
            event.preventDefault();
          }
        }

        this.uploadProgress = (files || []).map(file => ({
          error: false,
          color: "green-2",
          percent: 0,
          icon:
            file.type.indexOf("video/") === 0
              ? "movie"
              : file.type.indexOf("image/") === 0
              ? "photo"
              : file.type.indexOf("audio/") === 0
              ? "audiotrack"
              : "insert_drive_file"
        }));
      }
    },
    upload() {
      clearTimeout(this.uploading);

      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        },
        onUploadProgress: progressEvent => {
          console.log(progressEvent.loaded);
          this.uploadProgress[0].error = false;
          this.uploadProgress[0].color = "green-2";
          var percent = progressEvent.loaded / progressEvent.total;
          this.uploadProgress[0].percent = percent;
          console.log(
            "Progress:",
            progressEvent.loaded,
            "/",
            progressEvent.total,
            percent + "%"
          );
        }
      };

      var file = this.files[0];
      //var fileName = file.name;
      var strType = this.type;

      var formData = new FormData();
      formData.append("file", file);
      // You should have a server side REST API

      var _this = this;

      axios
        .post(api.getAPIBaseUrl() + "/uploads", formData, config)
        .then(function(objResponse) {
          objResponse.data.strType = strType;
          console.log("SUCCESS!!", objResponse.data);
          _this.$emit("uploaded", objResponse.data);
        })
        .catch(function(err) {
          console.log("FAILURE!!", err);
          _this.$emit("uploaded", err);
        });
    }

    /*
    __updateUploadProgress() {
      let done = true;

      this.uploadProgress = this.uploadProgress.map(progress => {
        if (progress.percent === 1 || progress.error === true) {
          return progress;
        }

        const percent = Math.min(1, progress.percent + Math.random() / 10);
        const error = percent < 1 && Math.random() > 0.95;

        if (error === false && percent < 1 && done === true) {
          done = false;
        }

        return {
          ...progress,
          error,
          color: error === true ? "red-2" : "green-2",
          percent
        };
      });

      this.uploading =
        done !== true ? setTimeout(this.__updateUploadProgress, 300) : null;
    }
    */
  },

  beforeDestroy() {
    clearTimeout(this.uploading);
  }
};
</script>

in express

  app.post('/uploads', function (req, res) {


    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send('No files were uploaded.');
    }

    // The name of the input field (i.e. "objFile") is used to retrieve the uploaded file
    let objFile = req.files[Object.keys(req.files)[0]]; //returns 'someVal'

    objFile.name = objFile.md5 + "." + mime.getExtension(objFile.mimetype);

    console.log("objFile is ", objFile);

    // Use the mv() method to place the file somewhere on your server
    objFile.mv(__dirname + '/uploads/' + objFile.name, function (err) {
      if (err) {
        res.status(500).json({ blnOK: false, msg: err.message });
      }

      var objResponse = {};
      objResponse.blnOK = true;
      objResponse.objFile = objFile;
      res.json(objResponse);
    });
  });

please note i am using “express-fileupload” for file uploading

Here is how i did it maybe it helps someone in future

component

<template>
  <div class="q-gutter-sm">
    <q-field
      ref="radioGroup"
      :value="radioGroup"
      hide-bottom-space
      borderless
      :rules="rules"
    >
      <q-radio
        v-model="radioGroup"
        v-on:input="emit"
        v-for="radioOption in radioOptions"
        :key="radioOption.id"
        :val="radioOption.id"
        :label="radioOption.name"
      />
    </q-field>
  </div>
</template>

<script>
export default {
  name: "base-radio",
  created() {
    this.radioGroup = this.value;
  },
  data() {
    return { radioGroup: "" };
  },
  props: {
    radioOptions: {
      type: Array,
      required: true
    },
    value: { required: true },
    isRequired: { type: Boolean, default: false },
    tooltip: {
      type: String
    }
  },
  computed: {
    rules() {
      return this.isRequired ? this.$utils.requiredRule : [];
    }
  },
  methods: {
    emit(value) {
      console.log("emitting", value);
      this.$emit("input", value);
    }
  }
};
</script>

<style lang="scss" scoped></style>

call to component

  <base-radio
                          isRequired
                          v-model="objModel.title"
                          :radioOptions="arrTitle"
                        ></base-radio>