Vue.js form file input Error in event handler

I am trying to upload a file in my form using the bootstrap-vue form file component

template

          <b-form-group id="userInputGroup8" label="User Picture:">
            <b-form-file id="userPictureInput" ref="fileinput" @input="userPictureSelected" v-model="userPictureFile" choose-label="Select" accept=".jpg, .png"></b-form-file>
            <br> Selected file : {{ userPictureFile.name }}
          </b-form-group>

Once the file is selected , the name is displayed in the browser, but it does not appear in the input field, and even if the userPictureSelected method is fired, I don't get its value in the console

script

data () {
  return {
    ...
    userPictureFile: '',
  }
},
 methods: _.extend({}, mapActions(['createUser']), {
   userPictureSelected: () => {
     console.log('Selected: ', this.userPictureFile.name)
   }
}

I get the error

 [Vue warn]: Error in event handler for "input": "TypeError: _this2.userPictureFile is undefined"

What could be wrong ? where can I get a good and recent example for uploading such file into my server backend static files directory ?

thanks for update