hii all,
i want result like this with lwc(https://rajvakati.com/2018/02/18/usage-of-lightningduallistbox/),
can anyone tell what i m doing wrong in this code below is the code

js file
import { LightningElement,track,wire,api} from 'lwc';
import getopp from '@salesforce/apex/WrapperclassForOpportunity.getopp';
export default class MultiPickList1 extends LightningElement {
@api contactlist=[];
@wire(getopp) opplist({error,data}){
         if (data) {
                this.contactlist = data[0].conlist;  
                alert('this.contactlist@@ '+ JSON.stringify (data[0].conlist) );
                alert('contactlist:'+this.contactlist);                               
        
        }
    }
}


html file 
<template>
    <lightning-card title="Multi select Picklist ">
        <lightning-dual-listbox 
      name="languages"
      label="Select Record"
      source-label="Available Contact Record"
      selected-label="Selected Contacted Record"
      options={contactlist}
      onchange={handleChange}>
  </lightning-dual-listbox>
    </lightning-card>
</template>


wrapper class
public class WrapperclassForOpportunity {
    @AuraEnabled(cacheable=true)
    public static List<payWrap> getopp(){
        List<payWrap> accWrapperList = new List<payWrap>();
        opportunity getopp=[select id, accountid,closedate,stagename from opportunity where id=:'0062v00001TDCVoAAP'];
         system.debug(getopp);
        account acc= [select id, name from account where id=:getopp.accountId];
         system.debug(acc);
        list<contact> conlist1=new list<contact>();
        conlist1=[select name from contact where accountid=:acc.id]; 
        if(!conlist1.isEmpty()){
            payWrap myWrap= new payWrap();
            mywrap.conlist=conlist1;
            accWrapperList.add(myWrap);
        }
        system.debug(accWrapperList);
        return accWrapperList;    
    }  
    public class payWrap{
        @AuraEnabled
        public List<Contact> conlist{get;set;}    
    }
}