on:complete is called immediately upon component mount.

[joepetrakovich]

I tried using on:complete but it gets called as soon as the component is bound. I had to resort to binding to the complete prop and reacting to it.

<script>
  const handlePinCompleted= async () => {
        console.log('called immediately');
    };
</script>

<Pincode bind:this={pinCodeComponent} bind:value={pinCodeValue} on:complete={handlePinCompleted} >
            <PincodeInput /><PincodeInput /><PincodeInput />
            <PincodeInput /><PincodeInput /><PincodeInput />
 </Pincode>