can't add user photo with vuejs

i have built a profile components to my projects (laravel+vuejs) when i try to show the user photo in her place it didn't show i try many ways but no solution .when i check the DB i find it but there is a problem that i can find it..Any help guys??? this the code belongs to how i want to sow the user photo:

       <div class="row">
      <div class="col-md-3"  v-for="user in users"  v-if=" user.id == key "  :key="user.id">


        <!-- Profile Image -->
        <div class="card card-primary card-outline"  >
          <div class="card-body box-profile">
            <div class="text-center">
              <img class="profile-user-img img-fluid img-circle" :src="getProfilePhoto()" 
               alt="User profile picture" >
            </div>

and this the main script :

<div class="form-group row">
                                <label for="photo" class="col-sm-3 col-form-label">Profile Picture</label>
                          <div class="col-sm-10">
                                    <input type="file"  name="photo"  @change="updateProfile" class="form-input">
                                </div>

                            </div>

                  <div class="form-group row">
                    <div class="col-sm-10">
                      <button   @click.prevent="updateInfo"  type="submit" class="btn btn-danger">Submit</button>
                    </div>
                  </div>
                </form></div>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div><!-- /.card-body -->
        </div>
        <!-- /.nav-tabs-custom -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  <!-- /.container-fluid -->
   <!-- /.content -->
         </div>

          </div>
       </div>
    </div>


  </template>

    <script>
export default {
    data(){
     return{
    form : new Form({
    location:'',
    eucation:'',
    photo:'',
    skills:'',
    email:'',
    password:''

   }),

         key : this.$route.params.id,
          users:[],
            roles:{},
            role:{
                id:'',
              role:''
            },
            user:{

            },

     }
    },
    methods:{
          afficherMembre(){
               axios.get('/api/membre').then(({ data }) =>(this.users = data.data));
          },
         getProfilePhoto(){

            let photo = (this.form.photo.length > 200) ? this.form.photo : "/img/profile/"+ 
        this.form.photo ;
            return photo;
        },

        updateInfo(){
        this.form.put('/api/profile')
            .then(()=>{
                this.form.reset();                 })
            .catch(() => {
                               });
        },
        updateProfile(e){
            let file = e.target.files[0];
            let reader = new FileReader();

            let limit = 1024 * 1024 * 2;
            if(file['size'] > limit){
                swal({
                    type: 'error',
                    title: 'Oops...',
                    text: 'You are uploading a large file',
                })
                return false;
            }

            reader.onloadend = (file) => {
                this.form.photo = reader.result;
            }
            reader.readAsDataURL(file);
        },
        afficherProjet(){
        axios.get("/api/getProjectsUserConnecte").then(({ data }) => (this.projets = data));
        },
    },


created(){
   this.afficherMembre();
},
    mounted() {
        console.log('Component mounted.')
    }


  }

via Chebli Mohamed