How to bind Array data to property in my component and update the database

Hello, anyone, i really need help here. I want to display the data of an array in an input field and update the field in database as the user types into it real time without refreshing the component. if i use value equals the data(textvalue="{{$product->prodName}}") it will display on my input, but if i bind it to a public property in my component(wire:model=“title.{{prodName}}”`), nothing will be displayed on the field and when i try to update i get an error that column cannot be null, since i set the column not to accept null value. i am using the latest version of livewire
My Component:


namespace App\Http\Livewire\Retailer;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use App\Models\Importlist;
use DB;

class ImportPage extends Component
public $data;
public $title;

public function render()
    $this->data = Importlist::orderby('id', 'desc')->where('addedBy', Auth::user()->id)->get();
    return view('livewire.retailer.import-page')

public function updatetitle($id){
    // $prod = Importlist::where('id', $id)->first();
    // $this->title = $prod->prodName;
    Importlist::where('id', $id)
        'prodName' => $this->title,
    session()->flash('message', 'Product title updated');


My Component View:
@foreach ($data as $product)

<input wire:model=“title.{{$product->prodName}}” type=“text” @click.away="$wire.updatetitle({{$product->id}})" class=“form-control” id=“basicInput” value="{{$product->prodName}}"/>

Please I need help here, please. Anyone?