How to fix the signal issue?

Question

#[component]
pub fn Supply() -> impl IntoView {
    let columns = vec!["Name".to_string(), "Quantity".to_string()];

    // Step 1: Convert `data` into a reactive signal
    let (data, set_data) = create_signal(vec![
        vec![Cell::Str("Iron".to_string()), Cell::Num(5.0)],
        vec![Cell::Str("Copper".to_string()), Cell::Num(7.0)],
        // Add more rows as needed...
    ]);

    // Step 2: Modify `on_save` to update `data`
    let on_save = {
        let data = data.clone(); // Clone to move into the closure
        move |value: Cell, row_index: usize, col_index: usize| {
            // Get current data and update the specific cell
            let mut updated_data = data.get().clone();
            if let Some(row) = updated_data.get_mut(row_index) {
                if let Some(cell) = row.get_mut(col_index) {
                    *cell = value;
                }
            }
            // Set the updated data to trigger a re-render
            set_data(updated_data);
        }
    };

    view! {
        <div>
            // Pass the reactive `data` signal's current value to `Table`
            // Note: You might need to adjust `Table` to accept the reactive signal or its current value
            {move || {
                let cloned_columns = columns.clone();
                view! {
                    <Table
                        columns=cloned_columns
                        // Access the current value of `data`
                        data=move || data()
                        on_save=on_save
                    />
                }
            }}

        </div>
    }
}

This component I'm trying to render with the leptos framework. The problem is with the line:

data=move || data()

I don't know how to pass this data as prop to the Table component properly. I keep getting a warning in the console pointing out I'm passing it the wrong way.

I tried passing the data as a closure and wrap the entire view with a closure as well neither worked.