How to use <sw-media-field> component?

I am trying to get the id of uploaded image file via sw-media-field. https://component-library.shopware.com/components/sw-media-field

<sw-media-field label="Profile Pic" :mediaId="user.mediaId"></sw-media-field>

Is this correct implmentation?

Is the methods considered as vue js events? How to implement them in shopware? Do i have to override @media-upload-finish in sw-media-field twig block or something

Also even though file is upload, no preview of the uploaded picture is visible?

<sw-media-field label="Profile Pic" :mediaId="user.mediaId">
<template v-slot:sw_media_field_upload_component>
<sw-upload-listener
:uploadTag="uploadTag"
autoUpload
@media-upload-finish="customAction">
</sw-upload-listener>
<sw-media-upload-v2
v-if="showUploadField"
variant="regular"
:allowMultiSelect="false"
:uploadTag="uploadTag">
</sw-media-upload-v2>
</template>
</sw-media-field>

Solution

There's an event media-id-change you can listen to. You may also use the v-model bind instead of the mediaId property to simplify if all you need the listener for is to set the id.

<sw-media-field
    :media-id="mediaId"
    label="Profile Pic"
    @media-id-change="onMediaIdChange"
/>

data() {
    return {
        mediaId: null,
    };
},

methods: {
    onMediaIdChange(value) {
        this.mediaId = value;
    },
},

or simply

<sw-media-field
    v-model="mediaId"
    label="Profile Pic"
/>